在angular 2项目中使用charts.js、chartjs-plugin-annotations和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';
最佳答案
我不确定注释是否根本不适用于您的 ng2-charts 设置,或者只是那些红色框对您不起作用。我的答案将适用,使注释插件工作。
面临同样的问题,但找到了一个有效的例子。
显然你需要安装注解插件:
npm install chartjs-plugin-annotation
之后,您可以直接复制下面演示的实现。
Line Chart with annotation example
只需复制标记和 typescript 。只编辑 2 个文件就足够了。
无需进一步配置。我只是自己测试了这个工作。
关于chart.js - 在 ng2-charts 中使用 chartjs-plugin-annotation,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53897380/