将chartjs-plugin-annotation与ng2-charts结合使用

Question

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

​

一切似乎都很好，除了图表上没有出现的框注释(红色)。与注释相关的代码放在图表选项中

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';

Answer 1

我不确定是注解根本不适用于您的NG2图表设置，还是仅仅是那些红色的框对您不起作用。我的答案将适用于让注解插件正常工作。

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

npm install chartjs-plugin-annotation

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

Line Chart with annotation example

只需复制标记和TypeScript。只编辑2个文件，就足够了。

不需要进一步的配置。我刚刚亲自测试了它的工作情况。