如何在uPlot中为数据序列添加水平参考线标注数值上下限

方案1：使用draw钩子直接绘制（最灵活，推荐） #

uPlot暴露了全生命周期的绘制钩子，你可以在系列绘制完成的钩子回调里，直接调用canvas API绘制自定义参考线，样式、位置完全可控。
示例代码如下：

const opts = {
  // 其他原有配置保持不变
  hooks: {
    draw: (u) => {
      // 可按需自定义阈值列表，支持动态修改
      const thresholds = [7.0, 7.4];
      const ctx = u.ctx;
      
      ctx.save();
      // 参考线样式，可按需调整为你需要的橙色虚线效果
      ctx.strokeStyle = '#ff7d00';
      ctx.lineWidth = 2;
      ctx.setLineDash([5, 5]);
      
      thresholds.forEach(val => {
        // 将y轴数值转换为画布实际坐标
        const yPos = u.valToPos(val, 'y');
        ctx.beginPath();
        // 从画布左边缘绘制到右边缘
        ctx.moveTo(u.bbox.left, yPos);
        ctx.lineTo(u.bbox.left + u.bbox.width, yPos);
        ctx.stroke();
      });
      
      ctx.restore();
    }
  }
};

// 按原有逻辑初始化uPlot实例即可
const u = new uPlot(opts, data, document.getElementById('chart-container'));

这种方式不需要修改原数据，也不需要额外调整系列配置，适合阈值固定或者需要动态变更的场景。

方案2：新增常量数据系列（最简单，零自定义绘制） #

你可以直接在原有数据中新增两个y值恒定的系列，把系列样式配置为参考线的样式，同时隐藏图例、数据点即可：

const data = [
  // 原有x轴时间序列
  [1620000000, 1620000001, /* 其余x轴数据 */],
  // 原有传感器数据序列
  [7.1, 7.3, 6.9, /* 其余传感器数值 */],
  // 新增下限参考线序列，所有值固定为7.0
  new Array(dataLength).fill(7.0),
  // 新增上限参考线序列，所有值固定为7.4
  new Array(dataLength).fill(7.4),
];

const opts = {
  series: [
    {}, // x轴配置保持不变
    {
      // 原有传感器系列配置保持不变
      label: '传感器数值',
      stroke: '#2196f3',
    },
    {
      label: '下限阈值',
      stroke: '#ff7d00',
      width: 2,
      dash: [5,5], // 虚线样式配置
      points: { show: false }, // 隐藏序列数据点
      showInLegend: false, // 不展示在图例中
    },
    {
      label: '上限阈值',
      stroke: '#ff7d00',
      width: 2,
      dash: [5,5],
      points: { show: false },
      showInLegend: false,
    }
  ]
};

这种方式完全复用uPlot的原生绘制逻辑，不需要编写任何自定义绘制代码，适合阈值固定的简单场景。

方案3：封装通用参考线逻辑 #

如果多个图表都需要用到参考线功能，可以把上述draw钩子的逻辑封装成可复用的配置函数，传入阈值、样式参数即可直接调用，不需要每个图表重复编写绘制逻辑。

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