Chart.js 雷达图（Radar Chart）

雷达图（Radar Chart）用于显示多个变量的比较，适用于数据分析和多维度评估，如运动员能力分析、产品性能对比等。

1. 安装 Chart.js

如果使用 npm：

npm install chart.js

或者通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. HTML 代码

<canvas id="myRadarChart"></canvas>

3. JavaScript 代码

<script>
const ctx = document.getElementById('myRadarChart').getContext('2d');

const myChart = new Chart(ctx, {
    type: 'radar', // 雷达图类型
    data: {
        labels: ['速度', '力量', '耐力', '技巧', '灵活性', '反应'], // 维度
        datasets: [
            {
                label: '运动员 A',
                data: [80, 90, 70, 85, 75, 95], // A 选手的数据
                backgroundColor: 'rgba(255, 99, 132, 0.2)', // 填充色
                borderColor: 'rgba(255, 99, 132, 1)', // 线条颜色
                borderWidth: 2
            },
            {
                label: '运动员 B',
                data: [70, 85, 80, 80, 85, 90], // B 选手的数据
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor: 'rgba(54, 162, 235, 1)',
                borderWidth: 2
            }
        ]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: true } // 显示图例
        },
        scales: {
            r: { // r 轴是雷达图的半径轴
                angleLines: { display: true }, // 显示角度线
                suggestedMin: 0, // 最小值
                suggestedMax: 100, // 最大值
                pointLabels: { font: { size: 14 } } // 轴标签字体大小
            }
        }
    }
});
</script>

4. 进一步优化

调整数据点

pointRadius: 5, // 数据点大小
pointHoverRadius: 7 // 悬停时数据点大小

动画

animation: {
    duration: 1200,
    easing: 'easeOutQuart'
}

隐藏数据填充色

如果只想显示线条，不填充颜色：

fill: false

这样，你就可以使用 Chart.js 绘制雷达图，适用于各种多维数据对比分析！🚀