怎样在PHP项目中实现雷达图？

wen java案例 2026-07-23 150

本文目录导读：

怎样在PHP项目中实现雷达图？

使用 Chart.js（最推荐）
使用 PHP GD 库生成图片
使用数据库动态生成
使用第三方库（如 ECharts）
推荐方案

在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);
?>