Chart.js 3.x版本中如何仅显示中心零网格轴线并隐藏其余所有网格线

没问题！在Chart.js 3.x版本里确实移除了旧版的zeroWidthLine选项，但咱们换个思路就能实现「隐藏Y轴所有网格线、仅保留中间零轴线区分正负值」的需求，我给你两种靠谱的实现方案：

方案1：利用原生网格线回调配置（简洁首选） #

这种方法直接通过Y轴网格线的回调函数，只对值为0的刻度线应用可见样式，其他网格线设为透明且无宽度，代码非常简洁：

const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: '正负值数据',
      data: [10, -5, 15, -8, 20],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        grid: {
          // 通过回调控制网格线颜色：仅零刻度显示颜色，其余透明
          color: (context) => context.tick.value === 0 ? '#666' : 'transparent',
          // 通过回调控制线宽：零刻度线加粗，其余设为0
          lineWidth: (context) => context.tick.value === 0 ? 2 : 0
        },
        // 可选：如果不需要显示Y轴刻度，可以隐藏
        ticks: {
          display: false
        }
      },
      x: {
        grid: {
          // 按你的需求配置X轴网格线，比如隐藏或保留
          display: true
        }
      }
    }
  }
});

原理说明 #

Chart.js 3.x允许网格线的color和lineWidth接收回调函数，我们可以通过context.tick.value判断当前刻度是否为0，只对零刻度线设置可见的颜色和宽度，其他网格线则完全透明且无宽度，最终就只会显示中间的零轴线。

方案2：自定义插件手动绘制（灵活性更高） #

如果需要更精细的控制（比如零轴线跨越整个图表区域、自定义线的样式动画等），可以用Chart.js的插件系统手动绘制零轴线：

// 定义零轴线插件
const zeroLinePlugin = {
  id: 'customZeroLine',
  beforeDraw(chart) {
    const ctx = chart.ctx;
    const yAxis = chart.scales.y;
    // 获取零值对应的Y轴像素位置
    const zeroYPosition = yAxis.getPixelForValue(0);

    // 保存当前绘图状态，避免影响其他元素
    ctx.save();
    // 设置零轴线样式
    ctx.strokeStyle = '#666';
    ctx.lineWidth = 2;
    ctx.setLineDash([]); // 可选：设置实线，若要虚线可改成[5,3]

    // 绘制从图表区域最左侧到最右侧的水平线
    ctx.beginPath();
    ctx.moveTo(chart.chartArea.left, zeroYPosition);
    ctx.lineTo(chart.chartArea.right, zeroYPosition);
    ctx.stroke();
    // 恢复绘图状态
    ctx.restore();
  }
};

// 创建图表时注册插件
const myChart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
    datasets: [{
      label: '正负值数据',
      data: [10, -5, 15, -8, 20],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        // 完全隐藏Y轴所有原生网格线
        grid: {
          display: false
        }
      }
    }
  },
  plugins: [zeroLinePlugin]
});

原理说明 #

通过自定义插件的beforeDraw钩子，我们可以直接操作Canvas上下文，手动计算零值对应的Y轴位置，然后绘制一条横跨整个图表区域的水平线。这种方法不受原生网格线的限制，能实现更多自定义效果。

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