[英]Change color of measure unit with Chart.js
I'm using Chart.js to create a bar chart.我正在使用 Chart.js 创建条形图。 Behind the cart there is a dark green background so it's hard to see the numbers in black that are displayed on y and x axys.购物车后面是深绿色背景,因此很难看到 y 和 x 轴上显示的黑色数字。
This is how I generate my chart:这就是我生成图表的方式:
document.getElementsByClassName("home-message")[0].innerHTML='<canvas id="myChart" width="400" height="400"></canvas>'
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
color: 'white',
data: {
labels: ['Bar', 'Mensa', 'Ingresso'],
datasets: [{
label: 'Prodotti venduti',
borderColor: 'rgba(255, 255, 255)',
data: [551, 1470, 2354],
backgroundColor: [
'rgba(255, 99, 132)',
'rgba(54, 162, 235)',
'rgba(255, 206, 86)'
],
borderWidth: 1
}]
},
options: {
scales: {yAxes: [{ticks: {beginAtZero: true}}]},
legend: {display: false, labels: {fontColor: 'white'}},
title: {display: true,text: 'Custom Chart Title'}
}
});
I checked the Chart.js page on how to customize the chart but I haven't find anything to change the color of these numbers.我查看了有关如何自定义图表的Chart.js 页面,但我没有找到任何可以更改这些数字颜色的东西。 Check this image if you don't know what numbers I am talking about如果您不知道我在说什么数字,请查看此图片
Is there a way to change the color of these numbers to white?有没有办法将这些数字的颜色更改为白色?
try this尝试这个
...
options: {
scales: {
yAxes: [{gridLines: { color: "#ffffff" },
scaleLabel: {
display: true,
fontColor:'#ffffff',
fontSize:12
},}]
}
}
..
You can change the color of multiple parts of the chart:您可以更改图表多个部分的颜色:
GridLines (the vertical or horizontal lines in the chart): GridLines(图表中的垂直或水平线):
gridLines: {
color: '#5555ff'
}
Ticks (the numbers you speak of):蜱(你说的数字):
ticks: {
fontColor: '#5555ff'
},
ScaleLabels (Name of the axis and its values): ScaleLabels(轴名称及其值):
scaleLabel: {
fontColor: '#5555ff'
}
These are all options you can specify at the options of an axis.这些都是您可以在轴的选项中指定的所有选项。
options: {
scales: {
xAxes: [{
// You insert the above code here
]}
}
}
Edit: Here is a picture of the options I described with the code I used:编辑:这是我用我使用的代码描述的选项的图片:
xAxes: [{
ticks: {
fontColor: 'red'
},
gridLines: {
color: 'blue'
},
scaleLabel: {
display: true,
labelString: 'Employee',
fontSize: 20.0,
fontColor: 'green'
}
}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.