如何在ChartJS中为特定刻度位置的网格线设置差异化样式

可以实现，Chart.js 支持通过回调函数给特定刻度的网格线单独设置样式，核心逻辑是利用网格配置的borderDash、lineWidth等属性支持函数传入的特性，判断当前刻度是否为0，返回对应的样式配置即可。

具体配置示例 #

scales: {
  x: {
    min: -5,
    max: 5,
    grid: {
      // 虚线配置：0值线返回空数组对应实线，其余保持原有虚线样式
      borderDash: (context) => context.tick.value === 0 ? [] : [2, 10],
      // 线宽配置：0值线设为2px粗，其余保持1px
      lineWidth: (context) => context.tick.value === 0 ? 2 : 1,
      color: `#000`,
    }
  },
  y: {
    min: -5,
    max: 5,
    grid: {
      borderDash: (context) => context.tick.value === 0 ? [] : [2, 10],
      lineWidth: (context) => context.tick.value === 0 ? 2 : 1,
      color: `#000`,
    }
  }
}

版本适配说明 #

以上配置适配 Chart.js v3 及以上版本，如果你使用的是更早的v2版本，只需要把配置里的grid属性替换为gridLines，回调参数的取值逻辑保持一致即可。

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