Chart.js 在ng2图表中使用chartjs插件注释

在angular 2项目中使用charts.js、chartjs插件注释和ng2图表，我需要用方框注释一个折线图，如下图所示。

除了图表上没有出现的框注释（红色）之外，一切看起来都很好。 注释相关代码放置在图表选项中

annotation: {
     drawTime: 'beforeDatasetsDraw',
     annotations: [
        {
        type: 'box',
        id: 'y-axis-box',
        //mode: 'horizontal',
        yScaleID: 'y-axis-0',
        yMax: 2,
        yMin: 0,
        backgroundColor: 'red',
        //value: date,
        borderWidth: 2
        },
      {
        type: 'box',
        id: 'y-axis-1',
        //mode: 'horizontal',
        yScaleID: 'y-axis-0',
        yMax: 5,
        yMin: 4,
        backgroundColor: 'red',
        //value: date,
        borderWidth: 2
        }
    ]
  }

似乎需要一些额外的配置，主要是注册插件。使用app.module.js中导入的ChartsModule中的baseChart指令淹没图表

import {ChartsModule} from 'ng2-charts/ng2-charts';

---

我不确定注释是否与您的ng2图表设置完全不兼容，或者只是那些红色框不适合您。我的答案将适用，让注释插件工作

面临同样的问题，但找到了一个有效的例子。 显然，您需要安装注释插件：

npm install chartjs-plugin-annotation

之后，您可以直接复制下面演示的实现。

只需复制标记和打字脚本。只编辑2个文件就足够了。

---

无需进一步配置。我只是自己测试了一下。

我刚刚测试了您在我自己的项目中提供的注释。它们完全按照你的预期工作。我认为您的问题在于注释设置，然后我的答案应该会对您有所帮助。请检查注释轴id。它必须与刻度id的名称id相同。