Как динамически использовать аннотацию chartjs-plugin-annotation с ng2-charts?

Я создаю статистическую страницу, на которой мне нужно отобразить несколько диаграмм, я создал компонент DynamicChartComponent, который покрывает столбиковые и линейные диаграммы из демонстрации здесь (https://valor-software.com/ng2-charts/#DynamicChart). Одна из диаграмм должна отображать среднюю аннотацию наборов данных. Для этого я использую аннотацию chartjs-plugin, которая настроена следующим образом:

{
    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, но это не решило мою проблему.


person Basvdh    schedule 20.05.2019    source источник
comment
Вы нашли решение этой проблемы? У меня аналогичная проблема - я добавляю аннотации во время выполнения, но они не обновляются.   -  person mneumann    schedule 16.10.2020


Ответы (1)


Я столкнулся с этим сегодня и решил это, позвонив:

this.chart.ngOnChanges({});

вместо того

this.chart.update()

Вызов ngOnChanges заставляет диаграмму обновлять и отображать аннотации, которые я добавил программно, тогда как при вызове update они не отображаются вообще. Надеюсь, это поможет всем, кто сталкивается с этой проблемой в будущем.

person Boots    schedule 10.12.2020