Chart.js标注插件添加竖线失败，请求技术排查

我正在使用Chart.js构建双折线图，尝试添加一条竖线。我甚至照搬了官方示例代码，但仍然无法生效。我反复检查代码多次，仍未找到问题所在，也尝试过多个示例均无效。能否有人帮我排查原因？

数据 #

[{"date":1,"cumulativePresentMonth":2061.61,"cumulativePastMonth":1750},{"date":2,"cumulativePresentMonth":2061.61,"cumulativePastMonth":1795.06},{"date":3,"cumulativePresentMonth":2061.61,"cumulativePastMonth":1916.97},{"date":4,"cumulativePresentMonth":2061.61,"cumulativePastMonth":1997.31},{"date":5,"cumulativePresentMonth":2061.61,"cumulativePastMonth":2187.67},{"date":6,"cumulativePresentMonth":2061.61,"cumulativePastMonth":2325.18},{"date":7,"cumulativePresentMonth":2161.2,"cumulativePastMonth":2334.73},{"date":8,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2388.39},{"date":9,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2406.26},{"date":10,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2661.98},{"date":11,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2661.98},{"date":12,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2661.98},{"date":13,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2661.98},{"date":14,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2711.35},{"date":15,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2766.5},{"date":16,"cumulativePresentMonth":2300.21,"cumulativePastMonth":2766.5},{"date":17,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":18,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":19,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":20,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":21,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":22,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":23,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":24,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":25,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":26,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":27,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":28,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5},{"date":29,"cumulativePresentMonth":null,"cumulativePastMonth":2766.5}]

标注配置 #

const annotation1 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 15,
  label: {
    content: 'restock',
    display: true
  },
};

图表配置与初始化代码 #

const data = {
  datasets: [
    {
      label: 'Past month',
      data: spentData,
      borderWidth: 2,
      borderColor: 'red',
      borderDash: [5,5],
      pointStyle: false,
      parsing: {
        xAxisKey: 'date',
        yAxisKey: 'cumulativePastMonth'
      },
    },
    {
      label: 'Current month',
      data: spentData,
      pointStyle: false,
      borderColor: 'green',
      parsing: {
        xAxisKey: 'date',
        yAxisKey: 'cumulativePresentMonth'
      },
    }
  ]
};

const scalesLables = {
  x: { display: true },
  y: { display: true },
};

const annotation1 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 15,
  label: {
    content: 'restock',
    display: true
  },
};

const config = {
  type: 'line',
  data,
  options: {
    parsing: { xAxisKey: 'date' },
    scales: scalesLables,
    plugins: {
      annotation: { annotations: { annotation1 } }
    }
  }
};

const dailyChart = new Chart(document.getElementById('chartCompare'), config);

核心问题：未引入Annotation插件 #

Chart.js的标注功能并非内置核心功能，必须单独加载chartjs-plugin-annotation插件，这是竖线不显示的最主要原因，按以下步骤修复：

1. 安装插件
   使用包管理器安装：

   npm install chartjs-plugin-annotation
   # 或
   yarn add chartjs-plugin-annotation
   

2. 注册插件
   在代码开头添加插件注册逻辑：

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

   若使用CDN引入，需在Chart.js脚本之后加载Annotation插件的脚本。

额外检查点 #

• x轴配置正确：你的x轴是数值型，scaleID: 'x'匹配默认x轴ID，无需修改。
• 标注值有效：value:15在你的x轴数据范围内，没问题。
• 清理冗余代码：代码中重复定义了annotation1变量，建议删除重复部分，避免代码冗余。

修正后的完整代码示例 #

// 注册Annotation插件（模块化场景）
import { Chart } from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
Chart.register(annotationPlugin);

// 你的数据数组
const spentData = [
  {"date":1,"cumulativePresentMonth":2061.61,"cumulativePastMonth":1750},
  {"date":2,"cumulativePresentMonth":2061.61,"cumulativePastMonth":1795.06},
  // ... 其余数据省略
];

const data = {
  datasets: [
    {
      label: 'Past month',
      data: spentData,
      borderWidth: 2,
      borderColor: 'red',
      borderDash: [5,5],
      pointStyle: false,
      parsing: {
        xAxisKey: 'date',
        yAxisKey: 'cumulativePastMonth'
      },
    },
    {
      label: 'Current month',
      data: spentData,
      pointStyle: false,
      borderColor: 'green',
      parsing: {
        xAxisKey: 'date',
        yAxisKey: 'cumulativePresentMonth'
      },
    }
  ]
};

const scalesLables = {
  x: { display: true },
  y: { display: true },
};

const annotation1 = {
  type: 'line',
  scaleID: 'x',
  borderWidth: 3,
  borderColor: 'black',
  value: 15,
  label: {
    content: 'restock',
    display: true
  },
};

const config = {
  type: 'line',
  data,
  options: {
    parsing: { xAxisKey: 'date' },
    scales: scalesLables,
    plugins: {
      annotation: { annotations: { annotation1 } }
    }
  }
};

const dailyChart = new Chart(document.getElementById('chartCompare'), config);

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