能否在Chart.js中绘制最值/垂直参考标注线？具体如何实现？

两个需求都可通过官方维护的 chartjs-plugin-annotation 插件实现，具体操作步骤如下：

1. 安装并注册插件 #

安装方式 #

• npm 安装：执行命令 npm install chartjs-plugin-annotation，注意匹配你的 Chart.js 版本：Chart.js v3/v4 对应插件 v2.x 版本，Chart.js v2 对应插件 v1.x 版本
• CDN 引入：直接引入对应版本的插件资源，无需手动注册

注册插件（模块化环境需要） #

import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';

Chart.register(annotationPlugin);

2. 配置参考线 #

所有参考线配置都在图表配置的 options.plugins.annotation.annotations 字段下定义，示例代码如下：

// 示例数据集
const chartData = {
  labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'],
  datasets: [{
    label: '用户满意度',
    data: [72, 48, 69, 93, 81],
    borderColor: '#2196F3',
    tension: 0.3
  }]
};

// 计算数据集的最大最小值
const valueList = chartData.datasets[0].data;
const minVal = Math.min(...valueList);
const maxVal = Math.max(...valueList);

const chartOptions = {
  plugins: {
    annotation: {
      annotations: {
        // 水平最小值参考线
        minReferenceLine: {
          type: 'line',
          yMin: minVal,
          yMax: minVal,
          borderColor: '#f44336',
          borderWidth: 2,
          borderDash: [5, 5], // 虚线样式，可删除改为实线
          label: {
            display: true,
            content: `最小值：${minVal}`,
            position: 'end'
          }
        },
        // 水平最大值参考线
        maxReferenceLine: {
          type: 'line',
          yMin: maxVal,
          yMax: maxVal,
          borderColor: '#4CAF50',
          borderWidth: 2,
          borderDash: [5, 5],
          label: {
            display: true,
            content: `最大值：${maxVal}`,
            position: 'end'
          }
        },
        // 垂直参考线：Less Satisfied
        lessSatisfiedLine: {
          type: 'line',
          xMin: 'Q2', // 对应x轴标签值，也可写索引1
          xMax: 'Q2',
          borderColor: '#FF9800',
          borderWidth: 2,
          label: {
            display: true,
            content: 'Less Satisfied',
            position: 'top',
            rotation: 'vertical' // 文字垂直显示
          }
        },
        // 垂直参考线：Most Satisfied
        mostSatisfiedLine: {
          type: 'line',
          xMin: 'Q4', // 对应x轴标签值，也可写索引3
          xMax: 'Q4',
          borderColor: '#9C27B0',
          borderWidth: 2,
          label: {
            display: true,
            content: 'Most Satisfied',
            position: 'top',
            rotation: 'vertical'
          }
        }
      }
    }
  }
};

// 初始化图表
new Chart(document.getElementById('yourChartId'), {
  type: 'line',
  data: chartData,
  options: chartOptions
});

3. 自定义调整说明 #

• 线条样式：修改 borderColor、borderWidth、borderDash 参数可分别调整参考线的颜色、粗细、虚线间隔
• 标签样式：修改 label.position 可调整标签位置（支持 start/center/end），修改 label.rotation 可调整文字旋转角度
• 定位规则：如果是类别轴，参考线的x/y值可直接填写对应刻度的标签字符串，无需写索引

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