Chart.js：如何在正负值堆叠柱状图零点绘制加粗水平线

Chart.js本身没有单独配置零点网格线的原生选项，但可以通过以下两种方式实现高亮效果：

方法一：使用自定义插件绘制 #

通过Chart.js的插件机制，在图表渲染完成后单独绘制零点线，不影响原有网格线配置：

const chart = new Chart(ctx, {
  type: 'bar',
  data: { /* 你的堆叠柱状图数据 */ },
  options: {
    scales: {
      y: {
        stacked: true,
        grid: {
          // 设置普通网格线的基础样式
          color: '#e0e0e0',
          lineWidth: 1
        }
      }
    }
  },
  plugins: [{
    afterDraw: (chart) => {
      const ctx = chart.ctx;
      const yAxis = chart.scales.y;
      // 获取零点对应的垂直像素位置
      const zeroY = yAxis.getPixelForValue(0);
      
      // 绘制高亮零点线
      ctx.save();
      ctx.strokeStyle = '#333'; // 深色，可自定义
      ctx.lineWidth = 2; // 加粗线宽，可自定义
      ctx.beginPath();
      ctx.moveTo(yAxis.left, zeroY);
      ctx.lineTo(yAxis.right, zeroY);
      ctx.stroke();
      ctx.restore();
    }
  }]
});

方法二：扩展Y轴修改网格线绘制逻辑 #

通过扩展线性轴，在原有网格线绘制完成后追加零点高亮线：

// 扩展原生线性轴
Chart.registry.scales.get('linear').extend({
  drawGrid: function() {
    // 先执行原生网格线绘制逻辑
    this._super.drawGrid.call(this);
    
    const ctx = this.ctx;
    const zeroY = this.getPixelForValue(0);
    
    // 绘制高亮零点线
    ctx.save();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(this.left, zeroY);
    ctx.lineTo(this.right, zeroY);
    ctx.stroke();
    ctx.restore();
  }
});

// 初始化图表
const chart = new Chart(ctx, {
  type: 'bar',
  data: { /* 你的堆叠柱状图数据 */ },
  options: {
    scales: {
      y: {
        stacked: true,
        type: 'linear', // 使用扩展后的线性轴
        grid: {
          color: '#e0e0e0',
          lineWidth: 1
        }
      }
    }
  }
});

注意要点 #

• 可根据需求调整strokeStyle（颜色）和lineWidth（线宽）参数，匹配视觉设计
• 若Y轴范围不包含零点，代码会自动跳过绘制，不会触发错误

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