Chart.js文字颜色

问题描述 投票:9回答:3

所以我使用chart.js http://www.chartjs.org/docs/,我不能改变底部文本的颜色

例如:“1月”,“2月”,“3月”,“4月”,“5月”,“6月”,“7月”以及左侧的数字

我尝试了所有这些选项:scaleFontColor:“#FFFFFF”pointLabelFontColor:“#FFFFFF”

我的完整代码:

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                label: "My Second dataset",
                fillColor : "rgba(255, 89, 114, 0.6)",
                strokeColor : "rgba(51, 51, 51, 1)",
                pointColor : "rgba(255, 89, 114, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                maintainAspectRatio: false,
                scaleFontColor: "#FFFFFF",
                pointLabelFontColor : "#FFFFFF",
                pointLabelFontSize : 30,
                data : [1,2,10,7,3,1]
            }
        ]

    }

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");

    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}


</script>
javascript chart.js
3个回答
6
投票

scaleFontColor用于更改标签的颜色。

您应该将它作为参数添加到函数中,而不是将其放在数据集中,如下所示:

window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: true, scaleFontColor: "#FFFFFF" }
});

14
投票

工作代码是这样的:

Chart.defaults.global.defaultFontColor = "#fff";

玩得开心 :)


-1
投票

我和凯南一起找到了这个问题

<script>
    var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
    var lineChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                label: "My Second dataset",
                fillColor : "rgba(255, 89, 114, 0.6)",
                strokeColor : "rgba(51, 51, 51, 1)",
                pointColor : "rgba(255, 89, 114, 1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                maintainAspectRatio: false,
                data : [1,2,10,7,3,1]
            }
        ]

    }

    window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");

    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true, scaleFontColor: "#FFFFFF" }
)};
</script>

这不是一般的数据类型,我必须正确调整括号!

非常感谢,现在看起来很棒。

© www.soinside.com 2019 - 2024. All rights reserved.