雷达图，Chart.js v3.2标签自定义

Question

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

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

特别是字体和颜色

我搜索了很多，但我找到了旧版本的解决方案，并且只针对颜色属性

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

图像

Answer 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>