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

Question

有没有办法使用 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
                },
                gridLines: {
                    color: "#FFFF00",
                    zeroLineColor: "#00FFFF",
                    zeroLineWidth: 1
                }
            }
        }
    }
};

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

Answer 1

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

例如：

    Chart.defaults.borderColor = "rgba(255,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);