使用 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: {&nbsp;&nbsp; color: '#5555ff'}蜱（你说的数字）：ticks: {&nbsp; fontColor: '#5555ff'},ScaleLabels（轴的名称及其值）：scaleLabel: {&nbsp; fontColor: '#5555ff'}这些都是您可以在轴的选项中指定的选项。options: {&nbsp; scales: {&nbsp; &nbsp; xAxes: [{&nbsp; &nbsp; &nbsp; // You insert the above code here&nbsp; &nbsp; ]}&nbsp; }}编辑：这是我用我使用的代码描述的选项的图片：xAxes: [{&nbsp; ticks: {&nbsp; &nbsp; fontColor: 'red'&nbsp; },&nbsp; gridLines: {&nbsp; &nbsp; color: 'blue'&nbsp; },&nbsp; scaleLabel: {&nbsp; &nbsp; display: true,&nbsp; &nbsp; labelString: 'Employee',&nbsp; &nbsp; fontSize: 20.0,&nbsp; &nbsp; fontColor: 'green'&nbsp; }}]

Answer 2

试试这个...options: {&nbsp; &nbsp;scales: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{gridLines: { color: "#ffffff" },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scaleLabel: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontColor:'#ffffff',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fontSize:12&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },}]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}..