Javascript 更改X轴和Y轴字体颜色

如何更改X轴和Y轴标签的颜色？ 我试图在

scaleLabel

中使用

fontColor

，但我可能在错误的地方使用了它

我试着在

scale

as中应用它。我还尝试了

scales

甚至

xAxes

var options = {
type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'red',
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            scaleLabel:{
                fontColor: 'red'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
 };

我一直在检查，但我似乎不太清楚。 由于chart.js没有提供足够的示例，有时要找出问题并不容易…

$（函数（）{
var ctx=document.getElementById（“myChart”）；
//Chart.defaults.global.defaultFontColor='red'；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[“红色”、“蓝色”、“黄色”、“绿色”、“紫色”、“橙色”]，
数据集：[{
标签：“#投票数”，
数据：[12,19,3,5,2,3]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
选项：{
图例：{标签：{fontColor:'orange'}}，
标题：{
显示：对，
fontColor:'蓝色'，
文本：“自定义图表标题”
},
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
fontColor:“红色”
},
}],
xAxes：[{
滴答声：{
fontColor:“绿色”
},
}]
} 
}
});
});
如果我们将选项设置为以下，则轴标签值的字体颜色会发生变化。例如，我在jsfiddle上尝试了它，它成功了。这同样适用于我的rails图表应用程序。

我回答这个问题可能会迟到，这对其他正在寻找答案的人来说是很有用的

在Charjs.JS中设置刻度标签和刻度的样式，我们可以使用以下设置。

options: {     
           scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {   // To format the scale Lebel
                                display: true,
                                labelString: 'X axe name',
                                fontColor:'#000000',
                                fontSize:10
                            },
                            ticks: {
                               fontColor: "black", // To format the ticks, coming on the axis/lables which we are passing.
                               fontSize: 14
                              }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Y axe name',
                                fontColor: '#000000',
                                fontSize:10
                            },
                            ticks: {
                                  fontColor: "black",
                                  fontSize: 14
                            }
                        }]
                 }
         }

有关所有属性，请参阅。在实施之前研究所有属性

快乐编码
 要更改图表对象标记和轴标签，请执行以下操作：

let changeItemColor = (item) => {
    item.scaleLabel.fontColor = color;
    item.ticks.fontColor = color;
    item.ticks.minor.fontColor = color;
    item.ticks.major.fontColor = color;
};
chart.options.scales.xAxes.forEach((item) => changeItemColor(item));
chart.options.scales.yAxes.forEach((item) => changeItemColor(item));
chart.update();

我已经更新了我的代码，我之前写的代码是针对chart.js 1.x的。我查看了文档，发现它必须在
ticks
中更改。您在文档中找不到吗？在我看来，这似乎很奇怪，我们被迫检查这么简单的任务的酸性代码。是的，文档不够清楚，需要一些时间才能理解。我在上面添加了一个代码片段来更改图表中标题、图例、比例和标签的字体颜色。
let changeItemColor = (item) => {
    item.scaleLabel.fontColor = color;
    item.ticks.fontColor = color;
    item.ticks.minor.fontColor = color;
    item.ticks.major.fontColor = color;
};
chart.options.scales.xAxes.forEach((item) => changeItemColor(item));
chart.options.scales.yAxes.forEach((item) => changeItemColor(item));
chart.update();