同一页面上的多个图表不起作用 - ng2-charts

Question

我在同一页面上使用了 2 个圆环图，如下所示，

有 2 个问题，1. 颜色（第二个图表没有颜色）2. 数据集。 （即使两个图表的数据不同，它仍然为两个图表选择相同的数据。）

HTML

<div style="display: block" *ngIf="isDataAvailable1">
    <canvas baseChart #baseChart="base-chart" width="400" height="250"
        [data]="custStateChartData"
        [labels]="custStateChartLabels"
        [chartType]="doughnutChartType"></canvas> 
</div>



<div style="display: block" *ngIf="isDataAvailable2">
    <canvas baseChart #baseChart1="base-chart" width="400" height="250"
        [data]="custReleaseChartData"
        [labels]="custReleaseChartLabels"
        [chartType]="doughnutChartType1"></canvas>
</div>

组件.ts

export class DashboardComponent implements OnInit{
    customersStateArr = [];
    customersReleaseArr = [];
    tagsArr = [];
    alarmsSeverityArr = [];
    systemsArr = [];

    flag1 = false;
    flag2 = false;

    public custStateChartLabels = [];
    public custStateChartData = [];  

    public custReleaseChartLabels = [];
    public custReleaseChartData = [];

    public doughnutChartType = "doughnut";
    public doughnutChartType1 = "doughnut";

    @ViewChild(BaseChartDirective) customerStateChart: any;
    @ViewChild(BaseChartDirective) customerReleaseChart: any;

    @ViewChild("baseChart")
    chart: BaseChartDirective;

    @ViewChild("baseChart")
    chart1: BaseChartDirective;

    constructor(
        private _cacheService: CacheService,
        private _dashboardService: DashboardService,
        private _notificationService : NotificationService,
        private _sessionManager : SessionManager,
        private _translationService: TranslationService,
        private _chartUtil: ChartUtil){
    }

    isDataAvailable1:boolean = true;
    isDataAvailable2:boolean = true;

    ngOnInit() {
        this.custStateChartLabels = [];
        this.custStateChartData = [];

        this.custReleaseChartLabels = [];
        this.custReleaseChartData = [];

        //Getting Customer data by release    
        var result1 = this._dashboardService.getCustomerDataByRelease();
        result1.subscribe(
          success => {
            this.custReleaseChartLabels = [];
            this.custReleaseChartData = [];
            this.customersReleaseArr = success;

            var chartData1 = this._chartUtil.getChartLabelsAndValuesArr(this.customersReleaseArr, "customerRelease");
            //this.customerReleaseChart.labels = chartData1.labels;
            //this.customerReleaseChart.data = chartData1.values;

            this.chart1.labels = chartData1.labels;
            this.chart1.data = chartData1.values;
            this.custReleaseChartLabels = chartData1.labels;
            this.custReleaseChartData =  chartData1.values;

        if(this.chart1 !== undefined){
            //this.chart1.ngOnDestroy();
            //this.chart1.chart = this.chart1.getChartBuilder(this.chart1.ctx);
            this.chart1.labels = chartData1.labels;
            this.chart1.data = chartData1.values;
            this.custReleaseChartLabels = chartData1.labels;
            this.custReleaseChartData =  chartData1.values;
            this.chart1.chart.update();

            this.chart1.ngOnChanges({} as SimpleChanges);
            this.chart1.ngOnChanges({
             data:chartData1.values,
             labels: chartData1.labels
            });
        }
        this.isDataAvailable2 = true;
      },
      err => {       
      });

        var result = this._dashboardService.getCustomerDataByState();
            result.subscribe(
            success => {
                this.custStateChartLabels = [];
                this.custStateChartData = [];

                this.customersStateArr = success;
                var chartData = this._chartUtil.getChartLabelsAndValuesArr(this.customersStateArr, "customerState");
                //this.customerStateChart.labels = chartData.labels;
                //this.customerStateChart.data = chartData.values;

                this.chart.labels = chartData.labels;
                this.chart.data = chartData.values;
                this.custStateChartLabels = chartData.labels;
                this.custStateChartData =  chartData.values;

                if(this.chart !== undefined){
                      //this.chart.ngOnDestroy();
                      //this.chart.chart = this.chart.getChartBuilder(this.chart.ctx);
                      this.chart.labels = chartData.labels;
                      this.chart.data = chartData.values;
                      this.custStateChartLabels = chartData.labels;
                      this.custStateChartData =  chartData.values;
                      this.chart.chart.update();
                      this.chart.ngOnChanges({} as SimpleChanges);

                      this.chart.ngOnChanges({
                         data:chartData.values,
                         labels: chartData.labels
                    });
                }
                this.isDataAvailable1 = true;
              },
              err => {      
              });
    };

    prepareDonutChart(view, chartDataArr, chartLabel, chartValues){
        if(view == "customerState" || view == "customerRelease"){

             if(view == "customerRelease"){
                var chartData = this._chartUtil.getChartLabelsAndValuesArr(chartDataArr, view);

                this.flag2 = true;

                this.customerReleaseChart.labels = chartData.labels;
                this.customerReleaseChart.data = chartData.values;

                if(this.chart1 !== undefined){
                      this.chart1.ngOnDestroy();
                      this.chart1.chart = this.chart1.getChartBuilder(this.chart1.ctx);
                }
                this.customerReleaseChart.ngOnChanges({});
                this.chart1.ngOnChanges({});

             }else if(view == "customerState"){
                var chartData1 = this._chartUtil.getChartLabelsAndValuesArr(chartDataArr, view);
                this.flag1 = true;
                this.customerStateChart.labels = chartData1.labels;
                this.customerStateChart.data = chartData1.values;

                if(this.chart !== undefined){
                      this.chart.ngOnDestroy();
                      this.chart.chart = this.chart.getChartBuilder(this.chart.ctx);
                }
                this.customerStateChart.ngOnChanges({});
                this.chart.ngOnChanges({});
             }
        }
    }
}

package.json "chart.js": "2.4.0", "ng2-charts": "1.5.0",

1.4.4 版本

使用 ng2-charts 1.4.4 版本解决了颜色问题，但是对于数据，这个版本也有问题，有时正确渲染有时不正确。

Answer 1

您应该与@ViewChildren装饰器一起使用：

HTML：

<div style="display: block" *ngIf="isDataAvailable1">
<canvas baseChart width="400" height="250"
    [data]="custStateChartData"
    [labels]="custStateChartLabels"
    [chartType]="doughnutChartType"></canvas> 

<div style="display: block" *ngIf="isDataAvailable2">
    <canvas baseChart width="400" height="250"
        [data]="custReleaseChartData"
        [labels]="custReleaseChartLabels"
        [chartType]="doughnutChartType1"></canvas>
</div>

组件.ts：

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

  export class DashboardComponent implements OnInit{

     ...

     @ViewChildren( BaseChartDirective )
       charts: QueryList<BaseChartDirective>
     ...

访问第一个图表：

    this.charts[0]... 

更新第一个图表：

   this.custStateChartData.push(55);
   this.custStateChartLabels.push('abc');  
   this.charts[0].ngOnChanges({});

你可以循环它：

this.charts.forEach((c) => {
      c.ngOnChanges({});
  });