使用Chart.js更改折线图的标签字体颜色 [英] Change label font color for a line chart using Chart.js
本文介绍了使用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"
}
}
还有一些其他组合,但似乎没有什么工作。我以为我在文档中找到了所需内容
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",
推荐答案
是的, 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
。
示例:
scaleFontSize: 16
这篇关于使用Chart.js更改折线图的标签字体颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文