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

瑞安·里奇(Ryan Rich)

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

但这也不能解决我的问题。

涡狼

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

您可能试图将其添加到数据对象中,这就是为什么它不起作用的原因。实际上,应将其作为Line函数的第二个参数传递,如下所示:

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

编辑:

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

例:

scaleFontSize: 16

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何使用dimple.js更改折线图中的折线颜色?

来自分类Dev

增加chart.js中折线图的标签大小

来自分类Dev

如何使用Chart.js显示折线图数据集点标签?

来自分类Dev

如何在Chart.js折线图上自定义y轴标签?

来自分类Dev

折线图chart.js上有两个不同的x轴标签

来自分类Dev

具有正确间隔 x 标签的 Chart.js 折线图

来自分类Dev

在chart.js中绘制折线图,仅在值更改时才放置点

来自分类Dev

使用d3.chart.js的d3.js中的折线图

来自分类Dev

Chart.js折线图未显示

来自分类Dev

Angular-chart.js-使折线图不弯曲

来自分类Dev

向Chart.js折线图添加标题

来自分类Dev

具有区域范围的Chart.js折线图

来自分类Dev

Chart.js折线图设置背景色

来自分类Dev

Chart.js-向折线图背景添加渐变

来自分类Dev

Chart.js - 折线图最右边的数据点

来自分类Dev

是否可以使用chart.js恢复折线图中的x轴值

来自分类Dev

使用chart.js将数据添加到折线图

来自分类Dev

如何将Chart.js折线图与车把一起使用?

来自分类Dev

Chart.js-使用addData()的折线图显示是否有错误?

来自分类Dev

Chart.js轴标签字体大小

来自分类Dev

如何使用 Chart.js 更改圆环图内的字体颜色?

来自分类Dev

如何使用C#在代码背后更改标签字体

来自分类Dev

图表js更改折线图轴字体大小/颜色和背景线

来自分类Dev

Microsoft Chart Control中的折线图

来自分类Dev

MPAndroid Chart如何使折线图平滑

来自分类Dev

使用d3.js构建折线图

来自分类Dev

如何使用dc.js创建多折线图

来自分类Dev

使用DC.JS的多系列折线图

来自分类Dev

使用数组制作折线图-D3.js