Chart.js 3.x 如何为折线图分段添加固定可见的中间文本标签

核心实现思路 #

利用Chart.js的自定义插件，通过afterDraw钩子在图表绘制完成后，手动计算每段折线的中点坐标，再在对应位置绘制文本。这种方式完全适配3.x版本的API，且能保证文本永久可见。

具体步骤与代码示例 #

1. 注册自定义插件 #

这个插件负责遍历折线的每一段，计算中点并绘制文本：

const segmentTextPlugin = {
  id: 'segmentText',
  afterDraw: (chart) => {
    const { ctx, scales, datasets } = chart;
    datasets.forEach(dataset => {
      // 只处理折线类型的数据集
      if (dataset.type !== 'line') return;
      
      // 遍历每一段折线（i从0到数据点数量-2）
      for (let i = 0; i < dataset.data.length - 1; i++) {
        // 获取当前点和下一个点的像素坐标
        const point1 = {
          x: scales.x.getPixelForValue(i),
          y: scales.y.getPixelForValue(dataset.data[i])
        };
        const point2 = {
          x: scales.x.getPixelForValue(i + 1),
          y: scales.y.getPixelForValue(dataset.data[i + 1])
        };
        
        // 计算线段中点
        const midX = (point1.x + point2.x) / 2;
        const midY = (point1.y + point2.y) / 2;
        
        // 设置文本样式
        ctx.fillStyle = '#333';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // 绘制自定义文本（可通过dataset的segmentLabels传入）
        const text = dataset.segmentLabels?.[i] || `段${i+1}`;
        ctx.fillText(text, midX, midY);
      }
    });
  }
};

// 注册插件到Chart.js
Chart.register(segmentTextPlugin);

2. 创建折线图配置 #

结合Y轴分类、分段上色需求，配置图表：

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'line',
  data: {
    labels: Array.from({length: 4}, (_, idx) => idx + 1), // X轴刻度
    datasets: [{
      label: '分段折线',
      data: ['分类1', '分类2', '分类3', '分类1'], // Y轴分类数据
      borderColor: ['#ff4444', '#00C851', '#33b5e5'], // 分段上色（对应3段折线）
      borderWidth: 2,
      pointBackgroundColor: '#ffffff',
      pointBorderColor: '#333333',
      pointBorderWidth: 2,
      pointRadius: 6,
      segmentLabels: ['上升', '下降', '回升'] // 每段的文本内容
    }]
  },
  options: {
    scales: {
      y: {
        type: 'category',
        labels: ['分类1', '分类2', '分类3'], // Y轴分类标签
        position: 'left'
      },
      x: {
        ticks: {
          stepSize: 1
        }
      }
    },
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

3. 关键细节调整 #

• 文本位置优化：如果数据点在左侧，可将ctx.textAlign设为'left'，并给midX加偏移量（比如midX + 8），避免文本与折线重叠。
• 样式自定义：根据需求修改fillStyle（文本颜色）、font（字体大小和类型）、textBaseline（垂直对齐方式）。
• X轴适配：如果你的X轴是分类轴，需将scales.x.getPixelForValue的参数改为对应X轴标签值，而非索引。

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