Chart.js实现垂直柱状图柱间水平线条而非柱顶连线的方法

核心思路 #

Chart.js没有内置配置项直接实现这个效果，但可以通过自定义插件，在图表绘制完成后，手动计算每个柱子的顶部坐标，绘制相邻柱子间的水平线。

具体代码实现 #

1. 定义自定义绘制插件

const connectBarsPlugin = {
  id: 'connectBars',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    const dataset = chart.data.datasets[0];
    if (!dataset) return;

    ctx.save();
    ctx.strokeStyle = '#666'; // 替换为你需要的线条颜色
    ctx.lineWidth = 2; // 线条粗细

    let prevTopY;
    let prevCenterX;

    // 遍历每个柱子，获取坐标并绘制连线
    chart.getDatasetMeta(0).data.forEach((bar, index) => {
      const currentCenterX = bar.x;
      const currentTopY = bar.y;

      if (index > 0) {
        ctx.beginPath();
        ctx.moveTo(prevCenterX, prevTopY);
        ctx.lineTo(currentCenterX, currentTopY);
        ctx.stroke();
      }

      prevTopY = currentTopY;
      prevCenterX = currentCenterX;
    });

    ctx.restore();
  }
};

2. 在图表配置中注册插件

const myChart = new Chart(document.getElementById('your-chart-id'), {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [{
      label: '销售额',
      data: [120, 190, 80, 150],
      backgroundColor: 'rgba(30, 144, 255, 0.8)', // 你的粗蓝色柱子
      borderWidth: 2
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
  plugins: [connectBarsPlugin] // 注册自定义插件
});

细节调整说明 #

• 多数据集场景：如果图表包含多个数据集，需要修改插件逻辑，遍历每个数据集的柱子元素分别处理
• 样式自定义：通过ctx.strokeStyle修改线条颜色，ctx.lineWidth调整线条粗细
• 坐标逻辑：bar.x是柱子的中心横坐标，bar.y是柱子顶部的纵坐标，这两个是Chart.js内置的柱子元素属性

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