雷达图，Chart.js v3.2 标签定制答案

【问题标题】：Radar Chart, Chart.js v3.2 labels customization雷达图，Chart.js v3.2 标签定制
【发布时间】：2021-04-28 22:12:25
【问题描述】：

如何在雷达图中自定义标签？

我指的不是传说中的标签，而是雷达图顶点的声音

特别是字体和颜色

我搜索了很多，但我找到了旧版本的解决方案，并且仅适用于颜色属性

我只是尝试使用pointLabels 属性但不起作用。有人可以帮我吗？

IMAGE

【问题讨论】：

标签： chart.js radar-chart chart.js3

【解决方案1】：

这可以通过以下options实现：

scales: {
  r: {
    pointLabels: {
      color: 'green',
      font: {
        size: 20,
        style: 'italic'
      }
    }
  }
}

我必须承认我也没有在 Chart.js 文档中找到解决方案。因此，我将整个图表记录到控制台 (console.log(chart)) 并搜索 "scales" 以最终找到 pointLabels 默认值。

请看下面的可运行示例，看看它是如何工作的：

new Chart('radar-chart', {
  type: 'radar',
  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)'
    }],
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    },
    scales: {
      r: {
        pointLabels: {
          color: 'green',
          font: {
            size: 20,
            style: 'italic'
          }
        }
      }
    }
  }
});

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

【讨论】：

console.log(chart) 的解决方案是一个示例解决方案，但它可以用于像我这样的所有问题，当文档中没有明确说明如何设置图表属性时！