Chart.js + Angular 5 - Destroy() 通过 *ngFor 循环创建的多个动态图表答案

【问题标题】：Chart.js + Angular 5 - Destroy() multiple dynamic charts created through *ngFor loopChart.js + Angular 5 - Destroy() 通过 *ngFor 循环创建的多个动态图表
【发布时间】：2018-09-14 11:29:18
【问题描述】：

我通过 *ngFor 循环及其工作创建了多个动态图表。但我想在第二次创建它们之前销毁所有图表。有没有办法实现它。我想在创建新图表之前销毁（）图表，但由于每次我能够实现它时图表数量未知。

我的 chartjs.component.ts：

import { Component, OnInit, ElementRef } from '@angular/core';

import { Chart } from 'chart.js';
import { pieceLabel } from 'chart.piecelabel.js';

import { DataService } from '../data.service';

@Component({
    selector: 'app-chartjs',
    templateUrl: './chartjs.component.html',
    styleUrls: ['./chartjs.component.css']
})
export class ChartjsComponent implements OnInit {
    constructor(private _dataService: DataService, private elementRef: ElementRef) {
    }

    jsons: any;
    NumberOfSystems: Number;
    charts = [];

    ngOnInit() {
        this._dataService.getData().subscribe(data => {
            this.jsons = data
            this.NumberOfSystems = this.jsons.data[0][1].systems.length
            this.createChartsData()
        });
    }

    createChartsData() {
        var array = [];

        for (var i = 0; i < this.NumberOfSystems; i++) {
            var pie = {
                type: 'doughnut',
                data: {
                    labels: ["Disks", "Mgmt", "Hardware", "FC", "Vols&Pols"],
                    datasets: [{
                        backgroundColor: ["#008000", "#008000", "#008000", "#008000", "#008000"],
                        data: [20, 20, 20, 20, 20]
                    }]
                },
                options: {
                    title: { display: false },
                    animations: true,
                    tooltips: { enabled: true },
                    legend: { display: true }
                }
            };
            array.push(pie);
        }

        this.createCharts(array);
    }

    createCharts(pieData) {
        if (canvas0) {
            this.canvas0.destroy();
        }

        for (var j = 0; j < this.NumberOfSystems; j++) {
            let htmlRef = this.elementRef.nativeElement.select(`canvas` + j);
            console.log(htmlRef);
            var tempChart = new Chart(htmlRef, pieData[j]);
            this.charts.push(tempChart);
        }
    }
}

这是chartjs.component.html：

<div>
    <canvas *ngFor="let chart of charts; let i = index" id="canvas{{i}}"></canvas>
</div>

【问题讨论】：

你想什么时候销毁图表？
我的组件上有一个选择过滤器。关于不断变化的数据变化。我正在编辑我的问题，destroy() 应该在根据文档创建之前。在函数开始时。
您可以创建一个名为array:any; 的公共变量，在createChartData() 中您可以最初将其定义为空白。因此，每当调用该函数时，它都会像this.array=[];一样首先被清空
根据文档chartjs.org/docs/latest/developers/api.html#destroy。
我可以像这样销毁单个图表 this.myChart0.destroy();或者但不知道如何以编程方式对从 myCharts0 到 myCharts21 等所有图表执行此操作。不知道每次不同的图表的确切数量。

标签： javascript angular angular5 chart.js

【解决方案1】：

通过将图表直接创建到图表数组中解决了自己。

 var ctx4: any = document.getElementById(`chart` + i);
    this.charts.push(new Chart(ctx4, bar));

并通过迭代图表数组来销毁图表。

if (this.charts) {
      this.charts.forEach(p => {
        p.destroy();
      });
    }

【讨论】：