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的方法。我搜索了互联网，但还没有找到如何更新/ REDRAW图表。如果我使用按钮更改图表的类型（即从行到条并再次更改为行），则图表会使用新数据重新绘制自身。但是在更新数据变量的值后怎么做呢？我发现的所有方法都不适合我的解决方案。请求帮助

Answer 1

您可以通过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即可让您的图表保持最新状态！

Answer 2

请遵循此步骤，它将起作用！

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 3

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

    ...
    this.chart.chart.update();

使用chartjs的update()方法

Answer 4

这是解决方案，在更新数据之后，简单的barChartData = null和barChartData =“新数据”。

<div style="display: block" *ngIf="barChartData">
                          <canvas baseChart
                                  [datasets]="barChartData"
                                  [labels]="barChartLabels"
                                  [options]="barChartOptions"
                                  [legend]="barChartLegend"
                                  [chartType]="barChartType"
                                  (chartHover)="chartHovered($event)"
                                  (chartClick)="chartClicked($event)"> 
                          </canvas>
                        </div>

Answer 5

多数民众赞成在组件中的错误。您遵循以下路径ng2-charts / charts / charts.js并自行更改。参考（https://github.com/valor-software/ng2-charts/issues/614）

BaseChartDirective.prototype.ngOnChanges = function (changes) {
if (this.initFlag) {
    // Check if the changes are in the data or datasets
    if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
        if (changes['data']) {
            this.updateChartData(changes['data'].currentValue);
        }
        else {
            this.updateChartData(changes['datasets'].currentValue);
        }
        // add label change detection every time
        if (changes['labels']) { 
            if (this.chart && this.chart.data && this.chart.data.labels) {
                this.chart.data.labels = changes['labels'].currentValue;    
            }
        }
        this.chart.update();
    }
    else {
        // otherwise rebuild the chart
        this.refresh();
    }
}};

Answer 6

尝试一下

public lineChartData:Array<any> = [];       

 setTimeout(() => {
      this.lineChartData= [
     {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'},
    ];
        }, 0)

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

6 个答案: