Javascript 更改 X 和 Y 轴字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39723147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change X and Y axis font color
提问by Alvaro
How can I change the color of the X and Y axes labels?
I was trying to use fontColorwithin scaleLabelbut I might be doing it in the wrong place ?
如何更改 X 和 Y 轴标签的颜色？我试图在fontColor内部使用，scaleLabel但我可能在错误的地方使用它？
I tried applying it within scaleas can be found on the source code. I also tried under scalesand even within xAxes.
我试图内将其scale作为可以在源代码中找到。我下也试过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
}
}]
}
}
};
I've been checking the documentationbut it doesn't seem to be very clear to me. And as chart.js doesn't provide enough examples, it is not easy to find out things sometimes...
我一直在检查文档，但对我来说似乎不是很清楚。而且由于chart.js 没有提供足够多的例子，所以有时很难找到东西......
回答by sahil
$(function(){
var ctx = document.getElementById("myChart");
//Chart.defaults.global.defaultFontColor='red';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend:{labels: {fontColor: 'orange'}},
title: {
display: true,
fontColor: 'blue',
text: 'Custom Chart Title'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
},
}],
xAxes: [{
ticks: {
fontColor: 'green'
},
}]
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>You can use fontColorinside ticks/label/legend:labelsfor a particular axis,
您可以在特定轴的刻度/标签/图例中使用fontColor :labels，
options: {
legend: {
labels: {
fontColor: 'orange'
}
},
title: {
display: true,
fontColor: 'blue',
text: 'Custom Chart Title'
} ,
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
},
}],
xAxes: [{
ticks: {
fontColor: 'green'
},
}]
}
}
or change the defaultFontColorto change font color of entire text elements drawn on the canvas.
或更改defaultFontColor以更改画布上绘制的整个文本元素的字体颜色。
Chart.defaults.global.defaultFontColor='red';
回答by Trilok Pathak
I might be late to answer this question, it will be useful for the other who are looking for the answers.
我可能会迟到回答这个问题，这对正在寻找答案的其他人很有用。
In the Charjs.JS to style the scale label and ticks we can use below settings.
在 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
}
}]
}
}
Please refer the linkfor all the properties. Study all the property before implementation.
请参阅所有属性的链接。在实施之前研究所有属性。
Happy coding !
快乐编码！
回答by Jo?o Paulo
To change your chart object ticks and axes labels, do like so:
要更改图表对象刻度和轴标签，请执行以下操作：
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();
回答by Rahul
if we set the options as below then the font color of axes label values changes. For example I tried it on jsfiddle and it worked. The same also worked for my chart in rails app. ...
如果我们设置如下选项，则轴标签值的字体颜色会发生变化。例如，我在 jsfiddle 上尝试过它并且有效。这同样适用于我在 rails 应用程序中的图表。...
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor:'red'
}
}]
}
}
...
...
