Chart.js版本3：如何为刻度线和网格线设置不同的颜色

问题描述

是否可以使用chart.js 3.x为图表刻度线和网格线颜色设置不同的颜色？当我更改网格线颜色然后刻度线颜色也改变时，我希望刻度线和网格线具有不同的颜色。

我尝试了以下配置，但是它同时更改了刻度线和网格线的颜色。

var config = {
    type: 'line',data: {
        datasets: [],},options: {
        scales: {
            xAxes: {
                ticks: {
                    beginAtZero: true
                },gridLines: {
                    color: "#FFFF00",zeroLineColor: "#00FFFF",zerolinewidth: 1

                }
            },yAxes: {
                ticks: {
                    beginAtZero: true
                },zerolinewidth: 1
                }
            }
        }
    }
};

如何使用scriptable options为刻度线和网格线设置不同的颜色？

解决方法

一种简单的方法是在绘制图表之前将 Chart.defaults.borderColor 设置为新值。

例如：

    Chart.defaults.borderColor = "rgba(255,255,.2)"; // White translucent,good for dark themes 
    let chart_options = {
      type: 'bar',data: {
        labels: labels,datasets: [{
          data: data_points,backgroundColor: colors
        }]
      }
    }
    var ctx = document.getElementById('some-chart').getContext('2d');
    new Chart(ctx,chart_options);