使用Chart.js更改度量单位的颜色 [英] Change color of measure unit with Chart.js

问题描述

我正在使用Chart.js创建条形图。
购物车后面有一个深绿色的背景，因此很难看到y和x轴上显示的黑色数字。

生成我的图表：

  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：{
标签：['Bar' ，'Mensa'，'Ingresso']，
数据集：[{
标签：'Prodotti venduti'，
 borderColor：'rgba（255，255，255）'，
数据：[551、1470、2354]，
背景颜色：[
'rgba（255、99、132）'，
'rgba（54、162、235）'，
'rgba（255，206，86）'
]，
 borderWidth：1 
}] 
}，
选项：{
比例尺：{ yAxes：[{ticks：{beginAtZero：true}}]}，
图例：{display：false，标签：{fontColor：'white'}}，
 title：{display：true，text： '自定义图表标题'} 
} 
}）； 
  

我检查了

  xAxes：[{
刻度：{
 fontColor：'red'
}，
 gridLines：{
 color：'blue'
}，
 scaleLabel：{
 display：true，
 labelString：'Employee'，
 fontSize：20.0，
 fontColor：'green'
 } 
}] 
  

I'm using Chart.js to create a bar chart. 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.

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

解决方案

You can change the color of multiple parts of the chart:

GridLines (the vertical or horizontal lines in the chart):

gridLines: { 
  color: '#5555ff'
}

Ticks (the numbers you speak of):

ticks: {
  fontColor: '#5555ff'
},

ScaleLabels (Name of the axis and its values):

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'
  }
}]

这篇关于使用Chart.js更改度量单位的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！