菜鸟教程
教程 chartjs tutorial

雷达图

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

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 },
      },
    },
  });
})();
在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>Chart.js 雷达图示例</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js&quot;&gt;&lt;/script&gt;
<style>
body {
max-width: 600px;
margin: 2rem auto;
font-family: Arial, sans-serif;
background: #fafafa;
padding: 1rem;
}


canvas {
  background: #fff;
  border: 1px solid #ccc;
  display: block;
  margin: 0 auto;
}



</style>
</head>


<body>
<canvas id="radarChart" width="600" height="600"></canvas>
<script>
(function () {
const ctx = document.getElementById(‘radarChart’).getContext(‘2d’);
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 }
}
}
});
})();
</script>
</body>


</html>

相关内容