动态更新的ng2图表

Question

是否可以更新任何chart从ng2-charts动态？我知道还有其他类似的库angular2-highcharts,但我想用它来处理它ng2-charts.主要问题是如何chart在按钮点击后重绘？我可以调整窗口大小并更新数据,因此必须手动执行此操作.

https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1?p=preview

Answer 1

一个好方法是抓住图表本身,以便使用API​​重绘它:

export class MyClass {
 @ViewChild( BaseChartDirective ) chart: BaseChartDirective;

  private updateChart(){
   this.chart.ngOnChanges({});
  }

}

Answer 2

我弄清楚了,也许它不是现有的最佳选择,但它确实有效.我们无法更新现有内容chart,但我们可以使用现有内容创建新内容chart并添加新内容.我们甚至可以获得更好的效果,关闭图表的动画.

解决问题的功能:

updateChart(){
   let _dataSets:Array<any> = new Array(this.datasets.length);
   for (let i = 0; i < this.datasets.length; i++) {
      _dataSets[i] = {data: new Array(this.datasets[i].data.length), label: this.datasets[i].label};
      for (let j = 0; j < this.datasets[i].data.length; j++) {
        _dataSets[i].data[j] = this.datasets[i].data[j];
      }
   }
   this.datasets = _dataSets;
}

现场演示:https://plnkr.co/edit/fXQTIjONhzeMDYmAWTe1？p = preview

@UPDATE: 正如@Raydelto Hernandez在下面的评论中提到的,更好的解决方案是:

updateChart(){
    this.datasets = this.dataset.slice()
}

Answer 3

最近我不得不使用 ng2-charts 并且我在更新我的数据时遇到了一个非常大的问题，直到我找到了这个解决方案：

<div class="chart">
        <canvas baseChart [datasets]="datasets_lines" [labels]="labels_line" [colors]="chartColors" [options]="options" [chartType]="lineChartType">
        </canvas>
</div>

在这里，我的组件中有什么：

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

@Component({
    moduleId: module.id,
    selector: 'product-detail',
    templateUrl: 'product-detail.component.html'
})

export class ProductDetailComponent {
    @ViewChild(BaseChartDirective) chart: BaseChartDirective;

    private datasets_lines: { label: string, backgroundColor: string, borderColor: string, data: Array<any> }[] = [
        {
            label: "Quantities",
            data: Array<any>()
        }
    ];

    private labels_line = Array<any>();

    private options = {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    };


    constructor() { }
    ngOnInit() {

        this.getStats();

    }
    getStats() {

        this.labels_line = this.getDates();

        this._statsService.getStatistics(this.startDate, this.endDate, 'comparaison')
            .subscribe(
            res => {
                console.log('getStats success');
                this.stats = res;

                this.datasets_lines = [];

                let arr: any[];
                arr = [];
                for (let stat of this.stats) {
                    arr.push(stat.quantity);
                }

                this.datasets_lines.push({
                    label: 'title',
                    data: arr
                });

                this.refresh_chart();

            },
            err => {
                console.log("getStats failed from component");
            },
            () => {
                console.log('getStats finished');
            });
    }

    refresh_chart() {
        setTimeout(() => {
            console.log(this.datasets_lines_copy);
            console.log(this.datasets_lines);
            if (this.chart && this.chart.chart && this.chart.chart.config) {
                this.chart.chart.config.data.labels = this.labels_line;
                this.chart.chart.config.data.datasets = this.datasets_lines;
                this.chart.chart.update();
            }
        });
    }

    getDates() {
        let dateArray: string[] = [];
        let currentDate: Date = new Date();
        currentDate.setTime(this.startDate.getTime());
        let pushed: string;
        for (let i = 1; i < this.daysNum; i++) {
            pushed = currentDate == null ? '' : this._datePipe.transform(currentDate, 'dd/MM/yyyy');
            dateArray.push(pushed);
            currentDate.setTime(currentDate.getTime() + 24 * 60 * 60 * 1000);
        }
        return dateArray;
    }    
}

我确信这是正确的方法。