如何在Chart.js中绘制柱状图之间的连接线？

要实现把柱状图前一个柱子的尾部和下一个柱子的头部用线连接的效果，你可以借助Chart.js的自定义插件，通过在绘制完成后手动绘制连接线来实现，具体代码如下：

完整实现代码 #

HTML部分 #

<canvas id="barChart"></canvas>

JavaScript部分 #

// 自定义连接线插件
const connectBarsPlugin = {
  id: 'connectBars',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    // 遍历所有数据集
    chart.data.datasets.forEach((dataset, datasetIndex) => {
      const meta = chart.getDatasetMeta(datasetIndex);
      // 只处理柱状图类型的数据集
      if (meta.type !== 'bar') return;

      ctx.save();
      // 设置连接线样式，可根据需求调整
      ctx.strokeStyle = dataset.borderColor || '#999';
      ctx.lineWidth = 2;
      ctx.lineCap = 'round';

      // 遍历柱子，从第二个开始连接前一个
      for (let i = 1; i < meta.data.length; i++) {
        const prevBar = meta.data[i - 1];
        const currBar = meta.data[i];

        // 计算前一个柱子的右侧中点坐标
        const prevX = prevBar.x + prevBar.width / 2;
        const prevY = prevBar.y + (prevBar.base - prevBar.y) / 2;

        // 计算当前柱子的左侧中点坐标
        const currX = currBar.x - currBar.width / 2;
        const currY = currBar.y + (currBar.base - currBar.y) / 2;

        // 绘制连接线
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.stroke();
      }
      ctx.restore();
    });
  }
};

// 初始化图表
const ctx = document.getElementById('barChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  plugins: [connectBarsPlugin], // 注册自定义插件
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '月度数据',
      data: [65, 59, 80, 81, 56],
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

关键说明 #

• 插件通过afterDraw钩子在图表绘制完成后执行，确保柱子已经渲染完毕，能正确获取坐标。
• 通过chart.getDatasetMeta(datasetIndex)获取柱子的元数据，包含每个柱子的位置、宽度等信息。
• 计算每个柱子的中点坐标时，prevBar.base是柱子在Y轴的基准点（通常是0刻度位置），prevBar.y是柱子顶部的Y坐标，两者的平均值就是柱子的垂直中点。
• 连接线的样式（颜色、宽度、端点样式）可以通过修改ctx.strokeStyle、ctx.lineWidth等属性自定义。

内容的提问来源于stack exchange，提问作者Hiep Phan Quang