Angular2 使用标签更新 ng2-charts

Question

我最近开始使用 Angular2，对框架 ng2-charts.[=15= 有疑问]

这是我的 component.ts 代码：

import { Component } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { PredictionService } from './prediction.service'

@Component({
  selector: 'prediction-result-chart',
  templateUrl: './predictionResultChart.component.html'
})

export class PredictionResultChartComponent{

  public pieChartLabels:string[] = [];
  public pieChartData:number[] = [];
  public pieChartType:string = 'pie';
  public JSONobject = {}

  constructor(private predictionService: PredictionService){
    this.getPredictions();
  }

  public getPredictions() {
    this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
  }

  public populateChart(obj): void{
    let labels:string[] = [];
    let data:number[] = [];
    for (var i = 0; i < obj.predictions.length; i++)
    {
      labels.push(String(obj.predictions[i].class));
      data.push(obj.predictions[i].percentage);
    };
    this.pieChartData = data;
    this.pieChartLabels = labels;
  }

  public chartClicked(e:any):void {}
  public chartHovered(e:any):void {}

}

component.html代码：

<div style="display: block">
  <canvas baseChart
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
</div>

服务代码：

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';

import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map';


@Injectable()
export class PredictionService {

  private baseUrl: string = 'http://localhost:8080/predict/';
  constructor(private http : Http){
  }

  getPredictions(text :string) {
    return this.http.get(this.baseUrl + text).map(res => res.json());
  }

}

使用上面的代码，这是我所拥有的，没有任何颜色的图表：

事实上，当我深入查看我的代码时，HTML 组件在开始时获取变量并随后更新它们。所以当标签为空时，即使我添加了一些标签，它们也会被添加为未定义。所以我有一个具有正确值但没有正确标签的图表。一切都标记为未定义。

如果我在开始时启动标签，我将得到一个带有正确值的漂亮彩色图表

所以我的问题是：

How to load the data, then render the HTML component ?

Is there anyway to render the chart.js component with no data and update it with right labels and data ?

需要任何帮助，谢谢。

Answer 1

在标准 chart.js 中，您可以在修改数据（包括标签）后使用 .update() 原型方法重新呈现图表。

但是，ng2-charts 似乎没有提供触发更新的机制（根据 this github issue）。我对 Angular2 一点经验都没有，但也许这对你有用？该方法取自 zbagley 在 17 天前发布的 github 问题中发表的评论（不幸的是，我找不到生成引用此特定评论的 url 的方法）。

该方法基本上是在数据可用之前不呈现图表。这是对 component.ts 代码的更改。

import { Component } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { PredictionService } from './prediction.service'

@Component({
  selector: 'prediction-result-chart',
  templateUrl: './predictionResultChart.component.html'
})

export class PredictionResultChartComponent {    
  public pieChartLabels:string[] = [];
  public pieChartData:number[] = [];
  public pieChartType:string = 'pie';
  public JSONobject = {};
  public isDataAvailable:boolean = false;

  constructor(private predictionService: PredictionService){
    this.getPredictions();
  }

  public getPredictions() {
    this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
  }

  public populateChart(obj): void {        
    let labels:string[] = [];
    let data:number[] = [];
    for (var i = 0; i < obj.predictions.length; i++)
    {
      labels.push(String(obj.predictions[i].class));
      data.push(obj.predictions[i].percentage);
    };
    this.pieChartData = data;
    this.pieChartLabels = labels;
    this.isDataAvailable = true;
  }

  public chartClicked(e:any):void {}
  public chartHovered(e:any):void {}    
}

然后您将在 component.html 代码中使用 ngIf。

<div style="display: block" *ngIf="isDataAvailable">
  <canvas baseChart
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
</div>

Answer 2

当我打印到控制台但不显示在图表上时，我可以获得这些值。

this.pieChartLabels :: ['PayDirect agent deposit','GtCollections agent deposit','Quickteller agent deposit']
this.pieChartData :: [1990,1202,2476]

有没有办法更新图表。图表似乎是在从网络服务接收数据之前加载的。

isDataAvailable2 = true

但图表从未加载。

Answer 3

首先你要确保标签的顺序与 data_set 的顺序相匹配，所以基本上你有这两个变量：

private datasets_pie = [
    {
        label: "Commissions",
        data: Array<any>(),
        backgroundColor: Array<any>()
    }
];
private labels_pie = Array<any>();

其次，我在颜色方面遇到了同样的问题，所以我不得不手动插入颜色，这是一个示例：

private chartColors: any[] = [{ backgroundColor: ["#FFA1B5", "#7B68EE", "#87CEFA", "#B22222", "#FFE29A", "#D2B48C", "#90EE90", "#FF69B4", "#EE82EE", "#6A5ACD", "#b8436d", "#9ACD32", "#00d9f9", "#800080", "#FF6347", "#DDA0DD", "#a4c73c", "#a4add3", "#008000", "#DAA520", "#00BFFF", "#2F4F4F", "#FF8C00", "#A9A9A9", "#FFB6C1", "#00FFFF", "#6495ED", "#7FFFD4", "#F0F8FF", "#7FFF00", "#008B8B", "#9932CC", "#E9967A", "#8FBC8F", "#483D8B", "#D3D3D3", "#ADD8E6"] }];

最终正确创建这些对象后，您必须调用此函数：

setTimeout(() => {
            if (this.chart && this.chart.chart && this.chart.chart.config) {
                this.chart.chart.config.data.labels = this.labels_pie;
                this.chart.chart.config.data.datasets = this.datasets_pie;
                this.chart.chart.config.data.colors = this.chartColors;
                this.chart.chart.update();
            }
            this.sommeStat = this.getSomme();
        });

所以我认为这可能有效:

    import { Component, ViewChild, ElementRef } from '@angular/core';
    import { ChartsModule } from 'ng2-charts';
    import { PredictionService } from './prediction.service';
    import { BaseChartDirective } from 'ng2-charts/ng2-charts';

    @Component({
      selector: 'prediction-result-chart',
      templateUrl: './predictionResultChart.component.html'
    })

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

      public pieChartType: string = 'doughnut';
        //public lineChartType: string = 'line';

        private datasets_pie = [
            {
                label: "Commissions",
                data: Array<any>(),
                backgroundColor: Array<any>()
            }
        ];
        private labels_pie = Array<any>();

        //private datasets_line : LineData[] = [];
        // private datasets_line : { label : string, data : Array<any>}[] ;
        // private labels_line = Array<any>();

        private chartColors: any[] = [{ backgroundColor: ["#FFA1B5", "#7B68EE", "#87CEFA", "#B22222", "#FFE29A", "#D2B48C", "#90EE90", "#FF69B4", "#EE82EE", "#6A5ACD", "#b8436d", "#9ACD32", "#00d9f9", "#800080", "#FF6347", "#DDA0DD", "#a4c73c", "#a4add3", "#008000", "#DAA520", "#00BFFF", "#2F4F4F", "#FF8C00", "#A9A9A9", "#FFB6C1", "#00FFFF", "#6495ED", "#7FFFD4", "#F0F8FF", "#7FFF00", "#008B8B", "#9932CC", "#E9967A", "#8FBC8F", "#483D8B", "#D3D3D3", "#ADD8E6"] }];

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

      constructor(private predictionService: PredictionService){
        this.getPredictions();
      }

      public getPredictions() {
        this.predictionService.getPredictions('hello').do(result => this.populateChart(result)).subscribe();
      }

      public populateChart(obj): void{

        this.labels_pie = [];
        this.datasets_pie[0]['data'] = [];
        for (var i = 0; i < obj.predictions.length; i++)
        {
          labels.push(String(obj.predictions[i].class));
          this.datasets_pie[0]['data'].push(obj.predictions[i].percentage);
        };
let arrColors: any[];
        arrColors = arrColorsCopy.splice(0, this.products.length);
        this.datasets_pie[0]['backgroundColor'] = arrColors;

        setTimeout(() => {
                if (this.chart && this.chart.chart && this.chart.chart.config) {
                    this.chart.chart.config.data.labels = this.labels_pie;
                    this.chart.chart.config.data.datasets = this.datasets_pie;
                    this.chart.chart.config.data.colors = this.chartColors;
                    this.chart.chart.update();
                }
            });
      }

      public chartClicked(e:any):void {}
      public chartHovered(e:any):void {}

    }

对于 html 它应该是这样的：

<div class="col-md-8">
                <div class="chart">
                    <canvas baseChart [datasets]="datasets_pie" [labels]="labels_pie" [chartType]="pieChartType" [colors]="chartColors"> </canvas>
                </div>
            </div>

就是这样，你应该试试这个方法，它应该有效

Answer 4

我通过更新配置中的标签来更新图表标签属性。

import { Component } from '@angular/core';
import { ChartsModule } from 'ng2-charts';
import { PredictionService } from './prediction.service'
import { BaseChartDirective } from 'ng2-charts'; // ----- added

@Component({
  selector: 'prediction-result-chart',
  templateUrl: './predictionResultChart.component.html'
})

export class PredictionResultChartComponent {    
  public pieChartLabels:string[] = [];
  public pieChartData:number[] = [];
  public pieChartType:string = 'pie';
  public JSONobject = {};
  public isDataAvailable:boolean = false;

  @ViewChild('mainChart') mainChart: BaseChartDirective; // ----- added

  constructor(private predictionService: PredictionService){
    this.getPredictions();
  }

  public getPredictions() {
    this.predictionService.getPredictions('hello').do(result => 
    this.populateChart(result)).subscribe();
  }

  public populateChart(obj): void {        
    let labels:string[] = [];
    let data:number[] = [];
    for (var i = 0; i < obj.predictions.length; i++)
    {
      labels.push(String(obj.predictions[i].class));
      data.push(obj.predictions[i].percentage);
    };
    this.pieChartData = data;
    this.mainChart.chart.config.data.labels = labels; // ---- updated
    this.isDataAvailable = true;
  }

  public chartClicked(e:any):void {}
  public chartHovered(e:any):void {}    
}

在 HTML 中添加 #{chartName} 以访问它

<div style="display: block" *ngIf="isDataAvailable">
  <canvas #mainChart="base-chart" baseChart
      [data]="pieChartData"
      [labels]="pieChartLabels"
      [chartType]="pieChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>
</div>

Angular2 使用标签更新 ng2-charts

Angular2 Update ng2-charts with labels

javascript

charts

chart.js

ng2-charts

angular