如何在Chart.js中通过两点连接绘制静态水平线？

不用手动输入50个重复数据点，有两种更简洁的方式实现：

方法一：使用Chart.js Annotation插件（推荐） #

这是官方支持的绘制辅助线的方案，比手动加数据点更灵活，还能自定义样式。

1. 先确保引入Annotation插件（CDN方式在Chart.js之后引入；npm环境则安装chartjs-plugin-annotation）
2. 在图表配置里添加plugins选项，直接定义水平线：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    datasets: [{
      label: '动态数据',
      data: [/* 你的动态数据点 */],
      borderColor: 'blue',
      fill: false
    }]
  },
  options: {
    plugins: {
      annotation: {
        annotations: {
          horizontalLine: {
            type: 'line',
            yMin: 1.01,
            yMax: 1.01,
            borderColor: 'red',
            borderWidth: 2,
            // 可选：设置虚线样式
            borderDash: [5, 5]
          }
        }
      }
    },
    scales: {
      y: {
        beginAtZero: false // 根据需求调整
      }
    }
  }
});

这个配置会直接在y=1.01的位置生成一条贯穿整个x轴的水平线，完全不需要手动添加重复数据点。

方法二：仅用两个数据点+spanGaps（无需插件） #

如果不想额外引入插件，可以给水平线数据集设置两个数据点（分别对应x轴的最小、最大值），再开启spanGaps: true。之前spanGaps未生效，大概率是因为数据点的x值没覆盖整个图表的x轴范围。

示例代码：

const chart = new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: [/* 你的x轴标签，比如['1', '2', ..., '50'] */],
    datasets: [
      {
        label: '动态数据',
        data: [/* 你的动态数据 */],
        borderColor: 'blue',
        fill: false
      },
      {
        label: '水平线',
        // 两个数据点对应x轴首尾位置，y值固定为1.01
        data: [{x: 0, y: 1.01}, {x: 49, y: 1.01}], // 假设x轴共50个点，索引0到49
        borderColor: 'red',
        borderWidth: 2,
        fill: false,
        spanGaps: true // 开启后自动连接两个不连续点
      }
    ]
  },
  options: {
    scales: {
      y: {
        beginAtZero: false
      }
    }
  }
});

注意：如果x轴是时间轴或数值轴，要把x值设为对应范围的最小、最大值，比如x轴范围是[0, 100]，就设{x:0, y:1.01}和{x:100, y:1.01}。

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