Ng2-charts / chart.js - 如何刷新/更新图表 - angular 4

Question

html：

<canvas *ngIf="actionData" baseChart width=800 height=300
                                  [datasets]="lineActionData"
                                  [labels]="lineActionLabels"
                                  [options]="lineChartOptions"
                                  [colors]="lineChartColors"
                                  [legend]="lineChartLegend"
                                  [chartType]="lineChartType"
                                  (chartHover)="chartHovered($event)"
                                  (chartClick)="chartClicked($event)"></canvas>

成分：

public lineChartData:Array<any> = [
    {data: [], label: ''}
     {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
     {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
     {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'},
  ];
etc

我在 html 中创建了一个图表。在我的 *.ts 文件中，我有包含数据和选项的变量。然后我调用一个更新 lineActionData 的方法。我已经在互联网上搜索过，但还没有找到如何更新/重绘图表。如果我用一个按钮改变图表的类型（即从线到条再到线），那么图表会用新数据重新绘制。但是如何在更新数据变量的值后直接进行呢？我发现的所有方法都不适合我的解决方案。谢谢帮助

Answer 1

请按照此操作，它将起作用！

1）导入这些...

import { Component, OnInit, ViewChild } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

2）到导出类（在你的ts文件中）添加这个...

@ViewChild(BaseChartDirective) chart: BaseChartDirective;

然后，首先您应该初始化包含数据和标签信息的对象。1, 1, 1 是一个示例，如果需要，您可以使用 0...

public barChartData: any[] = [{
    data: [1,1,1,1,1,1,1],
    label: 'this is an example'
}];

3) 在你的 ngOnInit 方法中添加一个 setTimeout 函数，或者使用 http 对后端的调用；

setTimeout(() => {
    this.chart.chart.data.datasets[0].data = [55, 355, 35, 50, 50, 60, 10]
    this.chart.chart.update()
}, 2000);

4) 在你的 html 文件中，确保将 baseChart 添加到 canvas 标签中

 <div class="chart-wrapper">
  <canvas baseChart class="chart"
  [datasets]="barChartData"
  [labels]="barChartLabels"
  [options]="barChartOptions"
  [legend]="barChartLegend"
  [chartType]="barChartType"
  [colors]="chartColors"
  (chartHover)="chartHovered($event)"
  (chartClick)="chartClicked($event)">
  </canvas>
 </div>

5）只是为了多探索一点，在ngOnInit方法中，您可以执行（this.chart.chart）的console.log，您将找到有关对象的更多信息...

希望能帮助到你！

Answer 2

您可以通过 ViewChild 绑定图表指令，如下所示：

...
export class HomeComponent {
    @ViewChild(BaseChartDirective)
    public chart: BaseChartDirective; // Now you can reference your chart via `this.chart`


void updateChart() {
    this.chart.chart.update(); // This re-renders the canvas element.
}

每次您的数据集发生更改时只需调用即可updateChart使您的图表保持最新！