雷达图

雷达图用于显示多变量数据的表现情况，通过多个轴向呈现各项指标。使用 Chart.js 可以轻松配置数据和样式，实现直观的多维数据展示。

(function() {
  const ctx = document.getElementById('radarChart').getContext('2d');
  const radarChart = new Chart(ctx, {
    type: 'radar',
    data: {
      labels: ['攻击', '防御', '法术', '耐力', '速度', '智力'],
      datasets: [{
        label: '角色A',
        data: [65, 59, 90, 81, 56, 55],
        fill: true,
        backgroundColor: 'rgba(255, 99, 132, 0.3)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)'
      }, {
        label: '角色B',
        data: [28, 48, 40, 19, 96, 27],
        fill: true,
        backgroundColor: 'rgba(54, 162, 235, 0.3)',
        borderColor: 'rgb(54, 162, 235)',
        pointBackgroundColor: 'rgb(54, 162, 235)'
      }]
    },
    options: {
      responsive: true,
      scales: {
        r: {
          angleLines: { display: true },
          suggestedMin: 0,
          suggestedMax: 100
        }
      },
      plugins: {
        legend: { display: true },
        tooltip: { enabled: true }
      }
    }
  });
})();

雷达图 ​

雷达图