在ng2-charts中使用chartjs-plugin-annotation

时间:2018-12-22 16:26:28

标签: chart.js ng2-charts

在angular 2项目中使用Charts.js,chartjs-plugin-annotations和ng2-charts,我需要使用箱形注释对折线图进行注释,如下图所示。 enter image description here

一切似乎都很好,除了没有显示在图表上的方框注释(红色)。 与注释相关的代码位于图表选项中

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

1 个答案:

答案 0 :(得分:0)

我不确定注解是否完全不适用于您的ng2-charts设置,或者只是那些红色框对您不起作用。我的答案将适用,并使注释插件正常工作。

面临同样的问题,但是找到了一个可行的例子。 显然,您需要安装注释插件:

npm install chartjs-plugin-annotation

之后,您可以直接复制下面演示的实现。
Line Chart with annotation example

只需复制标记和TypeScript。仅编辑2个文件就足够了。
无需其他配置。我只是自己测试了此功能。