Chart.js（v4）如何为单个坐标轴设置全局默认样式？

Chart.js（v4）中，网格样式由options.scales[scaleId].grid命名空间控制，我们可以通过以下代码全局统一设置所有坐标轴的网格样式：

Chart.defaults.scale.grid.display = true;
Chart.defaults.scale.grid.lineWidth = 5;

但如果需要给单个坐标轴（比如X轴）单独设置全局默认样式，直接通过坐标轴ID（如x）配置的写法并不生效，以下是尝试过的无效写法：

• 直接指定坐标轴ID：

Chart.defaults.scales.x.grid.display = true;
Chart.defaults.scales['x'].grid.display = true;

• IDE语法认可但无实际效果的写法：

Chart.defaults.scales.linear.axis.x = {
  grid: {
    borderColor: '#FF0000',
    display: true,
  }
};

最终有效解决方案 #

正确的方式是针对坐标轴的类型（而非ID）进行全局配置。比如X轴通常为category类型，Y轴多为linear类型，先判断目标类型的网格配置是否存在，再设置对应样式：

// 配置X轴（category类型）网格颜色为红色
if(!Chart.defaults.scales.category.grid){
   Chart.defaults.scales.category.grid = {};
}
Chart.defaults.scales.category.grid.color = 'red';

如果要配置Y轴，只需将category替换为linear即可：

// 配置Y轴（linear类型）网格样式
if(!Chart.defaults.scales.linear.grid){
   Chart.defaults.scales.linear.grid = {};
}
Chart.defaults.scales.linear.grid.display = true;
Chart.defaults.scales.linear.grid.lineWidth = 3;

内容的提问来源于stack exchange，提问作者DaveL17