Как динамически использовать chartjs-plugin-annotation с ng2-диаграммами? - PullRequest
Новая
       26

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

0 голосов
/ 20 мая 2019

Я создаю статистическую страницу, где мне нужно отобразить несколько диаграмм, я создал 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, но это не решило мою проблему.

...