如何在Chart.js柱状图的data-1与data-2之间添加Y轴垂直线？

针对你的需求，直接利用Chart.js的回调钩子就能实现，不需要额外插件。核心思路是在图表绘制完成后，手动计算每组两个柱子的中间位置，绘制Y轴方向的垂直线。

修改后的完整代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
<main class="container">
  <div>
    <canvas id="barChart"></canvas>
  </div>
</main>

.container {
  width: 80%;
  margin: 15px auto;
}

var ctx = document.getElementById("barChart").getContext('2d');
var barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Property-1", "Property-2", "Property-3", "Property-4", "Property-5", "Property-6", "Property-7", "Property-8", "Property-9", "Property-10", "Property-11", "Property-12", "Property-13", "Property-13"],
    datasets: [{
      label: 'data-1',
      data: [99, 1900, 300, 1700, 2500, 2400, 700, 230, 320, 550, 1600, 1700, 2100, 2300],
      backgroundColor: "rgba(244,162,97)"
    }, {
      label: 'data-2',
      data: [2000, 290, 500, 500, 200, 300, 100, 235, 329, 560, 1700, 1800, 2200, 2400],
      backgroundColor: "rgba(141, 137, 202)"
    }]
  },
  options: {
    animation: {
      onComplete: function() {
        const chart = this;
        const ctx = chart.ctx;
        ctx.save();
        
        // 自定义线条样式：颜色、宽度
        ctx.strokeStyle = '#ccc';
        ctx.lineWidth = 1;
        
        // 遍历每个标签组，绘制分隔线
        chart.data.labels.forEach((_, index) => {
          // 获取两组柱子的中心X坐标
          const bar1CenterX = chart.getDatasetMeta(0).data[index]._model.x;
          const bar2CenterX = chart.getDatasetMeta(1).data[index]._model.x;
          // 计算两组柱子的中间位置
          const lineX = (bar1CenterX + bar2CenterX) / 2;
          
          // 绘制垂直线：从图表顶部到底部
          ctx.beginPath();
          ctx.moveTo(lineX, chart.chartArea.top);
          ctx.lineTo(lineX, chart.chartArea.bottom);
          ctx.stroke();
        });
        
        ctx.restore();
      }
    }
  }
});

关键逻辑说明 #

1. 回调时机：使用animation.onComplete确保在图表所有动画完成后再绘制线条，避免被动画覆盖
2. 位置计算：通过getDatasetMeta获取每组柱子的中心坐标，计算中点作为垂直线的X轴位置，保证线条始终在两组柱子中间
3. 样式自定义：你可以修改strokeStyle（线条颜色）和lineWidth（线条宽度）来适配你的视觉需求

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