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

【问题标题】：Change label font color for a line chart using Chart.js使用 Chart.js 更改折线图的标签字体颜色
【发布时间】：2014-03-19 17:00:38
【问题描述】：

我正在使用 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"
    }
}

还有其他一些组合，但似乎没有任何效果。我以为我在docs 中找到了我想要的东西

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

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

【问题讨论】：

标签： javascript charts linechart

【解决方案1】：

是的，scaleFontColor 选项会更改标签的颜色。

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

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

编辑：

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

例子：

scaleFontSize: 16

【讨论】：

这似乎不适用于雷达图类型 :-(
@izak 他们应该有一些类似的属性，尝试从文档中测试其中一些。也许“pointLabelFontColor”是雷达图所需要的。
确实，我正在寻找的属性是 pointLabelFontColor。然后我遇到了另一个问题，即刻度在底部，如果你用一种颜色填充雷达图，它可能会完全消失。为了让比例尺在顶部，我最终不得不深入研究代码并将比例尺的绘图移到最后:-)
不适用于 Chart.js 2.1.3 带时间刻度的折线图。
@Mulgard 在更新版本中我根本找不到点标签，我看到点但没有文字。也许他们被转移到工具提示？如果是这样，那么您可以编辑工具提示选项的 titleFontColor。