Question

我正在创建一个统计页面，该页面需要显示几个图表，我制作了一个DynamicChartComponent，其中涵盖了演示中的条形图和折线图（https://valor-software.com/ng2-charts/#DynamicChart）。其中一张图表需要显示数据集的平均注释。为此，我使用了如下配置的chartjs-plugin-annotation：

{
    responsive: true,
    scales: {
      xAxes: [{}],
      yAxes: [
        {
          id: 'y-axis-0',
          position: 'left',
        }
      ]
    },
    annotation: {
        drawTime: "afterDatasetsDraw",
        annotations: [
            {
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y-axis-0',
            value: 0, // Average must be filled here
            borderColor: 'red',
            borderWidth: 2
            },
        ]
    },
}

与数据集的值不同，当值更改时注解不会更新，因此我尝试使用ViewChield装饰器手动更新图表。

DynamicChartComponent.ts：

import { Component, Input, Output, EventEmitter, OnInit, ViewChild } from '@angular/core';
import { DynamicChart } from '../../libs/classes/dynamicChart';
import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
import { Label, BaseChartDirective } from 'ng2-charts';
import * as pluginAnnotations from 'chartjs-plugin-annotation';

@Component({
  selector: 'dynamic-chart',
  templateUrl: 'dynamic-chart.html'
})
export class DynamicChartComponent implements OnInit {
  @ViewChild(BaseChartDirective) chart: BaseChartDirective;

  private mychart = new DynamicChart();

  constructor() {}
  ngOnInit(){
    console.log("_chart", this.chart);
  }
  setAnnotation(value){
    this.mychart.options.annotation.annotations[0].value = value;
    //this.chart.update()
  }

在DynamicChartComponent.html内部

<canvas baseChart *ngIf="datasets"
    [datasets]="datasets" 
    labels]="labels"
    [chartType]="chartType"
    [legend]="legendVisible"
    [options]="options"
</canvas>

统计页面上的预期用法：

private myDynamicChart = new DynamicChartComponent();
myDynamicChart.setAnnotation(averageValue);
myDynamicChart.update();

我发现ViewChild装饰器会产生错误：

Object(...) is not a function

我在这里做什么错了？

其他问题的答案都提到了ng2-charts-x的使用，但这并不能解决我的问题。

Answer 1

我今天遇到了这个问题，并通过以下方式解决了这个问题：

this.chart.ngOnChanges({});

代替

this.chart.update()

ngOnChanges调用将导致图表更新并以编程方式显示我添加的注释，而调用update时，它们将根本不显示。希望这对以后在这个问题上迷路的人有所帮助。

如何在ng2-charts中动态使用chartjs-plugin-annotation？

1 个答案: