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);