如何在chart.js中更改标签颜色?
本文介绍了如何在chart.js中更改标签颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的饼图定义如下
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: data.labels,
datasets: [{
data: data.values,
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 206, 86)',
'rgb(75, 192, 192)',
'rgb(153, 102, 255)',
'rgb(255, 159, 64)',
'rgb(204, 255, 64)',
'rgb(64, 159, 255)',
'rgb(175, 64, 255)'
],
options: {
responsive : true,
}
}],
fontColor : '#FFFFFF'
}
});
图表外观
但是,这是将标签的字体颜色设置为黑色,我如何更改此颜色。任何关于这一点的建议都将受到高度赞赏。谢谢!
推荐答案
您可以通过以下方式更改图例的标签的字体颜色…
options: {
legend: {
labels: {
fontColor: 'white'
}
},
...
}
ᴡᴏʀᴋɪɴɢᴇxᴀᴍᴘʟᴇ
数据-lang=”js”数据-隐藏=”假”数据-控制台=”假”数据-巴贝尔=”假”>
var chart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [{
data: [1, 1, 1, 1, 1],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 206, 86)',
'rgb(75, 192, 192)',
'rgb(153, 102, 255)'
]
}]
},
options: {
legend: {
labels: {
fontColor: 'white' //set your desired color
}
}
}
});
canvas{background: #222}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
这篇关于如何在chart.js中更改标签颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,