我研究了如何使用 chart.js 更改雷达图的标签颜色。
我试过scaleFontColor
但这对我不起作用。
var data = {
labels: ["titi", "tata", "tutu"],
datasets: [{
fillColor: "rgba(51,49,90,0.5)",
strokeColor: "rgba(255,255,255,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [12, 18, 22]
}]
};
var options = {
responsive: true
};
var chart = document.getElementById('chart-area-x').getContext('2d');
new Chart(chart).Radar(data, options);
我想给“titi”、“tata”和“tutu”加上一个特定的颜色。
最佳答案
Based on Chart.js 2.7 documentation我们可以用 options.scale.pointLabels.fontColor
为标签着色:
let tagsLabel = [ 'Axe1', 'Axe2', 'Axe3'];
let chart = new Chart(targetNode, {
type: 'radar',
data: {
labels: tagsLabel,
datasets: [
{
data: [
0, 2,
],
}
]
},
options: {
responsive: true,
legend: {
position: 'left'
},
title: {
display: true,
text: "It work's"
},
animation: {
animateScale: true,
animateRotate: true
},
scale: {
// ticks: {
// backdropColor: 'red',
// // Include a dollar sign in the ticks
// callback: function(value, index, values) {
// return '$' + value;
// }
// }
pointLabels: {
// callback: function(value, index, values) {
// return '$' + value;
// }
fontColor: tagsLabel.map((lbl)=>randColor()),
},
},
}
});
关于javascript - 更改雷达图js的标签颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41959834/