本文目录导读：
在PHP项目中实现雷达图,有多种方案，以下是几种主流的实现方式：
使用 Chart.js（最推荐）
安装
composer require php-http/message # 或者直接通过CDN引入
后端PHP代码
<?php
// radar_data.php
header('Content-Type: application/json');
$data = [
'labels' => ['速度', '力量', '技巧', '耐力', '敏捷', '智力'],
'datasets' => [
[
'label' => '选手A',
'data' => [85, 92, 78, 88, 95, 70],
'backgroundColor' => 'rgba(54, 162, 235, 0.2)',
'borderColor' => 'rgba(54, 162, 235, 1)',
'pointBackgroundColor' => 'rgba(54, 162, 235, 1)'
],
[
'label' => '选手B',
'data' => [90, 75, 85, 70, 80, 95],
'backgroundColor' => 'rgba(255, 99, 132, 0.2)',
'borderColor' => 'rgba(255, 99, 132, 1)',
'pointBackgroundColor' => 'rgba(255, 99, 132, 1)'
]
]
];
echo json_encode($data);
?>
前端HTML/JavaScript
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="radarChart" width="400" height="400"></canvas>
<script>
// 获取数据
fetch('radar_data.php')
.then(response => response.json())
.then(data => {
const ctx = document.getElementById('radarChart').getContext('2d');
new Chart(ctx, {
type: 'radar',
data: data,
options: {
responsive: true,
scales: {
r: {
beginAtZero: true,
max: 100,
ticks: {
stepSize: 20
}
}
},
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: '能力评估雷达图'
}
}
}
});
});
</script>
</body>
</html>
使用 PHP GD 库生成图片
<?php
function generateRadarChart($data, $labels, $width = 500, $height = 500) {
// 创建画布
$image = imagecreatetruecolor($width, $height);
// 设置颜色
$background = imagecolorallocate($image, 255, 255, 255);
$gridColor = imagecolorallocate($image, 200, 200, 200);
$blue = imagecolorallocate($image, 54, 162, 235);
$red = imagecolorallocate($image, 255, 99, 132);
$textColor = imagecolorallocate($image, 0, 0, 0);
// 填充背景
imagefill($image, 0, 0, $background);
// 计算中心点和半径
$centerX = $width / 2;
$centerY = $height / 2;
$radius = min($width, $height) * 0.35;
$angles = count($data[0]);
$angleStep = 2 * M_PI / $angles;
// 绘制网格
for ($i = 1; $i <= 5; $i++) {
$r = $radius * ($i / 5);
$points = [];
for ($j = 0; $j < $angles; $j++) {
$angle = $j * $angleStep - M_PI / 2;
$x = $centerX + $r * cos($angle);
$y = $centerY + $r * sin($angle);
$points[] = $x;
$points[] = $y;
}
imagepolygon($image, $points, $angles, $gridColor);
}
// 绘制轴线
for ($i = 0; $i < $angles; $i++) {
$angle = $i * $angleStep - M_PI / 2;
$x = $centerX + $radius * cos($angle);
$y = $centerY + $radius * sin($angle);
imageline($image, $centerX, $centerY, $x, $y, $gridColor);
// 添加标签
$labelX = $centerX + ($radius + 30) * cos($angle);
$labelY = $centerY + ($radius + 30) * sin($angle);
imagestring($image, 2, $labelX - 15, $labelY - 7, $labels[$i], $textColor);
}
// 绘制数据集
$colors = [$blue, $red];
foreach ($data as $index => $dataset) {
$points = [];
$maxValue = max($dataset);
$minValue = min($dataset);
$range = $maxValue - $minValue ?: 1;
for ($i = 0; $i < $angles; $i++) {
$angle = $i * $angleStep - M_PI / 2;
$value = ($dataset[$i] - $minValue) / $range; // 归一化
$r = $radius * $value;
$x = $centerX + $r * cos($angle);
$y = $centerY + $r * sin($angle);
$points[] = $x;
$points[] = $y;
}
// 填充区域
imagefilledpolygon($image, $points, $angles, $colors[$index]);
// 绘制边框
imagepolygon($image, $points, $angles, $colors[$index]);
}
// 输出图片
header('Content-Type: image/png');
imagepng($image);
imagedestroy($image);
}
// 使用示例
$data = [
[85, 92, 78, 88, 95, 70],
[90, 75, 85, 70, 80, 95]
];
$labels = ['速度', '力量', '技巧', '耐力', '敏捷', '智力'];
generateRadarChart($data, $labels);
?>
使用数据库动态生成
<?php
// 从数据库获取数据
class RadarChartController {
private $db;
public function __construct($db) {
$this->db = $db;
}
public function getPlayerStats($playerId) {
$stmt = $this->db->prepare("
SELECT stat_name, stat_value
FROM player_stats
WHERE player_id = ?
ORDER BY category_order
");
$stmt->execute([$playerId]);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
public function getRadarData($playerIds) {
$labels = [];
$datasets = [];
foreach ($playerIds as $index => $playerId) {
$stats = $this->getPlayerStats($playerId);
$data = [];
foreach ($stats as $stat) {
if ($index === 0) {
$labels[] = $stat['stat_name'];
}
$data[] = (float)$stat['stat_value'];
}
$datasets[] = [
'label' => "选手" . ($index + 1),
'data' => $data,
'backgroundColor' => $this->getRandomColor(0.2),
'borderColor' => $this->getRandomColor(1)
];
}
return [
'labels' => $labels,
'datasets' => $datasets
];
}
private function getRandomColor($alpha) {
$r = rand(0, 255);
$g = rand(0, 255);
$b = rand(0, 255);
return "rgba($r, $g, $b, $alpha)";
}
}
// 使用示例
$controller = new RadarChartController($db);
$data = $controller->getRadarData([1, 2]);
echo json_encode($data);
?>
使用第三方库（如 ECharts）
<?php
// 后端返回数据
$chartData = [ => '能力评估',
'radar' => [
'indicator' => [
['name' => '速度', 'max' => 100],
['name' => '力量', 'max' => 100],
['name' => '技巧', 'max' => 100],
['name' => '耐力', 'max' => 100],
['name' => '敏捷', 'max' => 100],
['name' => '智力', 'max' => 100]
],
'center' => ['50%', '50%'],
'radius' => '60%'
],
'series' => [
[
'type' => 'radar',
'data' => [
['value' => [85, 92, 78, 88, 95, 70], 'name' => '选手A'],
['value' => [90, 75, 85, 70, 80, 95], 'name' => '选手B']
]
]
]
];
echo json_encode($chartData);
?>
推荐方案
- Web应用：使用 Chart.js（最灵活、美观）
- 生成图片下载：使用 PHP GD 库
- 大数据量：使用 ECharts（性能更好）
选择哪种方案取决于你的具体需求,比如是否需要交互、是否需要导出图片、浏览器兼容性要求等。
