是否可以在 Chart.js 中生成圆形（圆形）形状的雷达图？

Question

当我绘制标准 Chart.js 雷达图时，轴是多边形（不是圆形）。例如：

是否可以将轴做成圆形，像这样？：

Answer 1

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

编辑：荣誉给@timclutton为指向造型轴的文档的部分，其中列出了circular属性为雷达图表。

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>

Answer 2

从版本 3开始，缩放选项已被弃用。因此，要制作带有圆形网格线的雷达图，您必须传递以下选项：

scales: {
  r: {
    grid: {
      circular: true,
    },
  },
},

scales: {
  r: {
    grid: {
      circular: true,
    },
  },
},

const ctx = document.getElementById('radar-chart');

const data = {
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running'
  ],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: true,
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgb(255, 99, 132)',
    pointBackgroundColor: 'rgb(255, 99, 132)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(255, 99, 132)'
  }, {
    label: 'My Second Dataset',
    data: [28, 48, 40, 19, 96, 27, 100],
    fill: true,
    backgroundColor: 'rgba(54, 162, 235, 0.2)',
    borderColor: 'rgb(54, 162, 235)',
    pointBackgroundColor: 'rgb(54, 162, 235)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgb(54, 162, 235)'
  }]
};

const config = {
  type: 'radar',
  data: data,
  options: {
    scales: {
      r: {
        grid: {
          circular: true,
        },
      },
    },
    elements: {
      line: {
        borderWidth: 3
      }
    }
  },
};

const radarChart = new Chart(ctx, config);