使用 Chart.js 更改度量单位的颜色

Question

我正在使用 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: {        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'}    }});我查看了有关如何自定义图表的Chart.js 页面，但我没有找到任何可以更改这些数字颜色的内容。 如果您不知道我在说什么数字，请查看此图片有没有办法将这些数字的颜色更改为白色？

Answer 1

您可以更改图表多个部分的颜色：

GridLines（图表中的垂直或水平线）：

gridLines: { 

  color: '#5555ff'

}

蜱（你说的数字）：

ticks: {

  fontColor: '#5555ff'

},

ScaleLabels（轴的名称及其值）：

scaleLabel: {

  fontColor: '#5555ff'

}

这些都是您可以在轴的选项中指定的选项。

options: {

  scales: {

    xAxes: [{

      // You insert the above code here

    ]}

  }

}

编辑：这是我用我使用的代码描述的选项的图片：

xAxes: [{

  ticks: {

    fontColor: 'red'

  },

  gridLines: {

    color: 'blue'

  },

  scaleLabel: {

    display: true,

    labelString: 'Employee',

    fontSize: 20.0,

    fontColor: 'green'

  }

}]

Answer 2

试试这个

...

options: {

   scales: {

          yAxes: [{gridLines: { color: "#ffffff" },

                   scaleLabel: {

                            display: true,

                            fontColor:'#ffffff',

                            fontSize:12

                        },}]

          }

}

..