javascript - 是否可以在 Chart.js 中生成圆形(圆形)雷达图？

Question

当我绘制标准 Chart.js 雷达图时，轴是多边形(不是圆形)。 For example :

是否可以将轴做成圆形，like this ？:

Answer 1

编辑 [2021-10-27]: Chart.js v3已删除 scale 选项，取而代之的是 options.scales.r。这是使雷达网格呈圆形的更新方法。

const red = "rgb(255, 99, 132)";
const color = Chart.helpers.color;
const config = {
  type: 'radar',
  data: {
    labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
    datasets: [{
      label: 'My dataset',
      backgroundColor: color(red).alpha(0.2).rgbString(),
      borderColor: red,
      pointBackgroundColor: red,
      data: [
        80,
        90,
        60,
        65,
        78,
        97,
        55
      ]
    }]
  },
  options: {
    scales: { // <-- Note change in options from scale to scales
        r: {
          grid: {
             circular: true
          },
          beginAtZero: true
        }
    }
  }
};

window.onload = function () {
  window.myRadar = new Chart(document.getElementById('chart'), config);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
<canvas id="chart"></canvas>

编辑: 感谢 @timclutton指向 axes styling文档部分，其中列出了雷达图的 circular 属性。

原始答案:经过一番挖掘，事实证明这是可能的。诀窍是将 scale: { gridLines: { circular: true } } 添加到图表的 options。请看下面的片段。 注意。截至 2019 年 7 月 19 日，我无法在 the official docs 中找到此信息。 .因此，它要么尚未记录，要么将来可能会更改/删除此功能。

const red = "rgb(255, 99, 132)";
const color = Chart.helpers.color;
const config = {
  type: 'radar',
  data: {
    labels: [['Eating', 'Dinner'], ['Drinking', 'Water'], 'Sleeping', ['Designing', 'Graphics'], 'Coding', 'Cycling', 'Running'],
    datasets: [{
      label: 'My dataset',
      backgroundColor: color(red).alpha(0.2).rgbString(),
      borderColor: red,
      pointBackgroundColor: red,
      data: [
        80,
        90,
        60,
        65,
        78,
        97,
        55
      ]
    }]
  },
  options: {
    scale: {
      gridLines: {
        circular: true
      },
      ticks: {
        beginAtZero: true
      },
    }
  }
};

window.onload = function () {
  window.myRadar = new Chart(document.getElementById('chart'), config);
};

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="chart"></canvas>