使用Chart.js更改折线图标签字体颜色

Question

使用Chart.js更改折线图标签字体颜色

12

我正在使用Chart.js生成一些图表。折线图需要标签。但是我似乎找不到一种改变这些标签颜色的方法。

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"
    }
}

还有一些其他的组合，但似乎都不起作用。我以为在文档中找到了我想要的东西。

//String - Scale label font colour  
    scaleFontColor : "#fff",

但那也没有解决我的问题。

- Ryan Rich

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vortexwolf · Accepted Answer

是的，scaleFontColor选项可以改变标签的颜色。

你可能尝试将其添加到数据对象中，这就是它无法工作的原因。实际上，应该像这样作为Line函数的第二个参数传递：

var myLine = new Chart(document.getElementById("cpu-chart").getContext("2d"))
    .Line(lineChartData, { scaleFontColor: "#ff0000" });

编辑：

同样地，要改变字体大小，请使用 scaleFontSize。

示例：

scaleFontSize: 16