Chartjs如何实现Y轴上两个不同数组来源数据点的连线

实现逻辑 #

通过Chart.js内置的插件生命周期钩子，匹配两个数据集相同索引位置的坐标点，直接在画布上绘制连线即可，无需修改原有数据集配置。

具体实现步骤 #

1. 准备基础数据集 #

确认你的两个目标数据集配置示例如下，可根据实际业务场景替换对应配置：

const chartData = {
  labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
  datasets: [
    {
      label: "上层数据集",
      data: [18, 25, 13, 29, 17, 21],
      borderColor: "#2196F3",
      backgroundColor: "#BBDEFB"
    },
    {
      label: "下层数据集",
      data: [7, 12, 5, 11, 4, 9],
      borderColor: "#F44336",
      backgroundColor: "#FFCDD2"
    }
  ]
};

2. 注册自定义连线插件 #

const crossDatasetLinePlugin = {
  id: "crossDatasetLine",
  // 数据集渲染完成后触发连线
  afterDatasetDraw: (chartInstance) => {
    const ctx = chartInstance.ctx;
    // 获取两个数据集的渲染元数据（包含每个点的像素坐标）
    const firstDatasetMeta = chartInstance.getDatasetMeta(0);
    const secondDatasetMeta = chartInstance.getDatasetMeta(1);

    // 遍历所有同索引点位绘制连线
    firstDatasetMeta.data.forEach((pointA, index) => {
      const pointB = secondDatasetMeta.data[index];
      // 跳过不存在的点位
      if (!pointA || !pointB) return;
      
      ctx.save();
      ctx.beginPath();
      // 起始点为两个数据点的坐标
      ctx.moveTo(pointA.x, pointA.y);
      ctx.lineTo(pointB.x, pointB.y);
      // 连线样式可自定义
      ctx.lineWidth = 2;
      ctx.strokeStyle = "rgba(120, 120, 120, 0.6)";
      // 虚线配置，不需要虚线可删除该行
      ctx.setLineDash([4, 2]);
      ctx.stroke();
      ctx.restore();
    });
  }
};

3. 初始化图表时引入插件 #

const chartConfig = {
  type: "line",
  data: chartData,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
  // 注册自定义插件
  plugins: [crossDatasetLinePlugin]
};

// 初始化图表
new Chart(document.getElementById("chartContainer"), chartConfig);

样式调整说明 #

• 如需修改连线样式，直接调整插件内strokeStyle（颜色）、lineWidth（线宽）、setLineDash（虚线间隔）的参数即可。
• 该方案同时适配折线图、柱状图等多种Chart.js支持的图表类型，无需修改核心逻辑。

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