雷达图、Chart.js v3.2 标签定制

问题描述

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

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

特别是字体和颜色

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

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

IMAGE

解决方法

这可以通过以下 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,132)',pointBackgroundColor: 'rgb(255,pointBorderColor: '#fff',pointHoverBackgroundColor: '#fff',pointHoverBorderColor: 'rgb(255,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>