Question

所以即时使用chart.js http://www.chartjs.org/docs/ 我无法改变底部文字的颜色

例如：＆＃34; 1＆＃34;＆＃34;二月＆＃34;＆＃34;三月＆＃34;＆＃34; 4月＆＃34;＆＃34;五月＆＃34;＆＃34; 6月＆＃34;＆＃34; 7月＆＃34; 以及左侧的数字

我尝试了所有这些选项： scaleFontColor：＆＃34; #FFFFFF＆＃34; pointLabelFontColor：＆＃34; #FFFFFF＆＃34;

我的完整代码：

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

Answer 1

工作代码就是这样：

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

玩得开心：）

Answer 2

scaleFontColor用于更改标签的颜色。

不应将其添加到数据集中，而应将其作为参数添加到函数中，如下所示：

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

Answer 3

在 Chart.js v3 中可以通过以下方式实现：

Chart.defaults.color = "#ff0000";

Answer 4

对于 chart.js 3.x 迁移，x 和 y 轴上的文本标签设置为：

设置以下选项：

scales: {
  x: {
    ticks: {
      color: "red"
    }
  },
  y: {
    ticks: {
      color: "green"
    }
  }
}

如果你想改变网格线的颜色，找到类似的解决方案，在 x / y 值写入内部

grid: {
  color: "white"
}

Answer 5

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

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

它不是正常的数据类型，我必须正确调整括号！

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

Chart.js文字颜色

5 个答案: