Chart.js如何为X轴与Y轴设置不同全局配置？

嘿，这个坑我之前踩过！你之前的写法不对是因为Chart.js的全局配置层级和单个图表的options结构有对应关系，但你用的路径错了。下面给你两种版本的正确全局配置方法，以及更高效的组织方式：

首先说正确的全局配置写法 #

如果用的是Chart.js v3+（现在主流版本）

v3+把轴配置统一放到了scales（复数）下，x轴和y轴可以直接通过scales.x和scales.y单独设置全局配置：

// 全局设置X轴网格线不绘制在图表区域内
Chart.defaults.scales.x.grid.drawOnChartArea = false;
// 全局设置Y轴网格线绘制在图表区域内
Chart.defaults.scales.y.grid.drawOnChartArea = true;

// 顺便把你之前的通用全局配置也整合进来，保持统一
Chart.defaults.scales.x.grid.display = true;
Chart.defaults.scales.x.grid.drawBorder = true;
Chart.defaults.scales.x.grid.color = '#f5f5f5';

Chart.defaults.scales.y.grid.display = true;
Chart.defaults.scales.y.grid.drawBorder = true;
Chart.defaults.scales.y.grid.color = '#f5f5f5';

Chart.defaults.global.legend.display = true;
Chart.defaults.global.legend.labels.fontSize = 13;
Chart.defaults.global.legend.labels.fontColor = '#373d3f';

如果用的是Chart.js v2（旧版本）

v2的轴配置是数组形式，全局配置需要给xAxes和yAxes赋值数组对象：

// 全局配置X轴
Chart.defaults.scale.xAxes = [{
  gridLines: {
    display: true,
    drawBorder: true,
    color: '#f5f5f5',
    drawOnChartArea: false
  }
}];

// 全局配置Y轴
Chart.defaults.scale.yAxes = [{
  gridLines: {
    display: true,
    drawBorder: true,
    color: '#f5f5f5',
    drawOnChartArea: true
  }
}];

// 通用图例配置
Chart.defaults.global.legend.display = true;
Chart.defaults.global.legend.labels.fontSize = 13;
Chart.defaults.global.legend.labels.fontColor = '#373d3f';

更简洁高效的全局配置方式 #

你可以用Chart.defaults.set()方法把配置分组，让代码更整洁，避免重复写Chart.defaults：

// 全局图例配置
Chart.defaults.set('global', {
  legend: {
    display: true,
    labels: {
      fontSize: 13,
      fontColor: '#373d3f'
    }
  }
});

// 全局X轴配置
Chart.defaults.set('scales.x', {
  grid: {
    display: true,
    drawBorder: true,
    color: '#f5f5f5',
    drawOnChartArea: false
  }
});

// 全局Y轴配置
Chart.defaults.set('scales.y', {
  grid: {
    display: true,
    drawBorder: true,
    color: '#f5f5f5',
    drawOnChartArea: true
  }
});

这样设置之后，你新建任何图表时，只要不单独在options里覆盖这些配置，就会自动继承全局的轴设置，不用再每个图表重复写轴的配置了～

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