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

whitzsjs  于 2023-10-18  发布在  Chart.js
关注(0)|答案(7)|浏览(130)

网址:

<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文件中,我有带有数据和选项的变量。然后我调用一个方法来更新lineData。我已经在网上搜索过了,但没有找到如何更新/重绘图表。如果我用按钮改变图表的类型(即从线到条再到线),那么图表会用新的数据重新绘制自己。但是如何在更新数据变量的值之后直接执行此操作?我找到的所有方法都不适合我的解决方案。Thx帮助

qrjkbowd

qrjkbowd1#

这里是解决方案,数据更新后,简单的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>
unhi4e5o

unhi4e5o2#

这是组件中的一个bug。您可以按照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();
    }
}};
7vhp5slm

7vhp5slm3#

试试这个

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)
vecaoik1

vecaoik14#

使用ngOnChanges()方法。

@ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

...

this.chart.ngOnChanges({});
2w3kk1z5

2w3kk1z55#

请遵循这个,它会工作!
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方法中添加一个setString函数,或者通过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,您将找到有关对象的更多信息...
希望能帮上忙!

ryevplcw

ryevplcw6#

您可以通过ViewChild绑定chart指令,如下所示:

...
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即可使图表保持最新!

yx2lnoni

yx2lnoni7#

@ViewChild(BaseChartDirective)
public chart: BaseChartDirective;

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

使用update()方法的chartjs

相关问题