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


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

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


8850
2018-03-19 17:00


起源



答案:


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

您可能尝试将其添加到数据对象,这就是它无效的原因。实际上它应该作为第二个参数传递 Line 功能如下:

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

编辑:

同样,要改变字体大小使用 scaleFontSize

例:

scaleFontSize: 16

16
2018-03-19 17:28



这样做了。谢谢! - ryanSrich
这似乎不适用于雷达图表类型:-( - izak
@izak他们应该有一些类似的属性,尝试从文档中测试其中的一些。也许“pointLabelFontColor”是雷达图表所需要的。 - vorrtex
实际上,我正在寻找的属性是pointLabelFontColor。然后我又遇到了额外的问题,即刻度位于底部,如果用一种颜色填充雷达图,它可能会完全消失。为了获得最高比例,我最终不得不深入研究代码并将比例图绘制为最后:-) - izak
不适用于Chart.js 2.1.3具有时间刻度的折线图。 - Mulgard


答案:


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

您可能尝试将其添加到数据对象,这就是它无效的原因。实际上它应该作为第二个参数传递 Line 功能如下:

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

编辑:

同样,要改变字体大小使用 scaleFontSize

例:

scaleFontSize: 16

16
2018-03-19 17:28



这样做了。谢谢! - ryanSrich
这似乎不适用于雷达图表类型:-( - izak
@izak他们应该有一些类似的属性,尝试从文档中测试其中的一些。也许“pointLabelFontColor”是雷达图表所需要的。 - vorrtex
实际上,我正在寻找的属性是pointLabelFontColor。然后我又遇到了额外的问题,即刻度位于底部,如果用一种颜色填充雷达图,它可能会完全消失。为了获得最高比例,我最终不得不深入研究代码并将比例图绘制为最后:-) - izak
不适用于Chart.js 2.1.3具有时间刻度的折线图。 - Mulgard