使用 Chart.js 更改折线图的标签字体颜色 [英] Change label font color for a line chart using Chart.js
问题描述
我正在使用 Chart.js 生成一些图表.折线图需要标签.我似乎想不出改变这些标签颜色的方法.
I'm using Chart.js to generate some charts. The line chart requires labels. I can't seem to figure out a way to change the color of those labels.
var chartGood = "rgba(50,182,93,0.5)";
var lineChartData = {
labels : ["3/14","3/15","3/16","3/17","3/18","3/19","3/20","3/21","3/22","3/23"],
datasets : [
{
fillColor : chartGood,
strokeColor : "rgba(255,255,255,1)",
pointColor : "rgba(50,182,93,1)",
pointStrokeColor : "#fff",
data : [12, 21, 28, 29, 31, 55, 52, 50, 49, 59]
}
]
}
var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d")).Line(lineChartData);
我试过了:
labelColor : "#fff",
legend : {
font : {
color : "#fff"
}
}
label : {
font : {
color : "#fff"
}
}
还有其他一些组合,但似乎没有任何效果.我以为我在 docs
And a few other combinations but nothing seems to work. I thought I found what I was looking for in the docs
//String - Scale label font colour
scaleFontColor : "#fff",
但这也没有解决我的问题.
but that didn't solve my issue either.
推荐答案
是的,scaleFontColor
选项会更改标签的颜色.
Yes, the scaleFontColor
option changes the color of labels.
您可能尝试将其添加到数据对象中,这就是它不起作用的原因.实际上它应该作为 Line
函数的第二个参数传递,如下所示:
You probably tried to add it to the data object, that's why it didn't work. Actually it should be passed as a second parameter of the Line
function like this:
var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d"))
.Line(lineChartData, { scaleFontColor: "#ff0000" });
同样,要更改字体大小,请使用 scaleFontSize
.
Similarly, to change the font size use scaleFontSize
.
示例:
scaleFontSize: 16
这篇关于使用 Chart.js 更改折线图的标签字体颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!