将chartjs-plugin-annotation与ng 2图表一起使用

ssm49v7z 于 2022-12-13 发布在 Chart.js

关注(0)|答案(2)|浏览(146)

在angular 2项目中使用charts.js，chartjs-plugin-annotations和ng 2-charts，我需要用一个框注解来注解一个折线图，如下图所示。x1c 0d1x
除了没有出现在图表上的框注解（红色）之外，其他一切看起来都很好。

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

chart.js

来源：https://stackoverflow.com/questions/53897380/using-chartjs-plugin-annotation-with-ng2-charts

2条答案

按热度按时间

8ljdwjyq1#

这并不明显，但是在安装npm install chartjs-plugin-annotation --save之后，您应该在yot Chart.js中注册它。您可以直接在创建图表的组件中进行注册：

import { Chart } from 'chart.js';
import { default as Annotation } from 'chartjs-plugin-annotation';

  ngOnInit() {
    Chart.register(Annotation);
  }

现在你可以把annotation特性放到插件部分来使用它们了：

const chartOptions = {
  plugins: {
    annotation: {
      annotations: [{
        type: 'line',
        mode: 'horizontal',
        yMin: 6,
        yMax: 6,
      }]
    }
  }
};

赞(0）回复(0）举报 2022-12-13

enyaitl32#

我不确定是注解不适合你的ng 2-charts设置，还是只是那些红色的方框不适合你。我的答案是适用的，让注解插件工作。
遇到了同样的问题，但找到了一个工作的例子。显然你需要安装注解插件：