如何在Chart.js中添加带标签的水平阈值线（危险边界线）

要实现类似危险边界的水平阈值线，直接用官方维护的chartjs-plugin-annotation插件即可，这是Chart.js官方推荐的扩展方案，具体操作如下：

1. 引入插件 #

如果用npm管理项目，先安装插件：

npm install chartjs-plugin-annotation

纯前端项目直接在页面中引入插件脚本即可，注意要和你的Chart.js版本兼容（比如Chart.js v4对应插件v2及以上版本）。

2. 配置图表阈值线 #

创建Chart实例时，在options中添加annotation配置项，定义水平阈值线的属性：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '数据趋势',
      data: [12, 19, 3, 5, 2],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    },
    // 阈值线核心配置
    plugins: {
      annotation: {
        drawTime: 'afterDatasetsDraw', // 确保线条在折线之后绘制
        annotations: {
          dangerLine: {
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y', // 关联Y轴，随轴缩放
            value: 15, // 阈值数值，按需调整
            borderColor: 'rgb(54, 162, 235)', // 匹配示例图的蓝色
            borderWidth: 2,
            // 可选：添加阈值标签
            label: {
              content: '危险阈值',
              enabled: true,
              position: 'end'
            }
          }
        }
      }
    }
  }
});

关键参数说明 #

• type: 'line'：指定绘制对象为线条
• mode: 'horizontal'：设置线条为水平方向
• scaleID: 'y'：绑定到Y轴，保证阈值线随Y轴刻度变化
• value：设置阈值的具体数值，根据业务需求调整
• borderColor/borderWidth：控制线条的颜色和粗细，匹配示例样式
• label：可选配置，给阈值线添加文字标签，提升可读性

需要多条阈值线时，只需在annotations数组中新增配置对象即可。

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