Angular2用标签更新ng2-图表 [英] Angular2 Update ng2-charts with labels

问题描述

这几天我开始使用 Angular2 ，并对框架 ng2-charts 有疑问.

I am starting to work these days with Angular2, and have a question with the framework ng2-charts.

这是我的 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());
  }

}

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

With the codes above, here is what I have, a chart without any colors :

实际上，当我深入研究代码时，HTML组件从一开始就获取了变量，然后对其进行了更新.因此，当标签为空时，即使我添加了一些标签，它们也将作为未定义添加.所以我有一个带有正确值但没有正确标签的图表.一切都标记为未定义.

In fact when I looked deeply into my code, the HTML component took the variables at the beginning and update them then. So when the labels are empty, even if I add some labels, they will be added as undefined. So I have a chart with the right values but not the right labels. Everything marked as undefined.

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

And if I initiate the labels at the beginning, I will have a good coloured chart with the right values

所以我的问题是:

如何加载数据，然后呈现HTML组件?

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

是否仍然可以在没有数据的情况下呈现chart.js组件并使用正确的标签和数据对其进行更新?

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

需要任何帮助，谢谢.

推荐答案

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

In standard chart.js you can use the .update() prototype method to re-render a chart after you have modified its data (including labels).

但是，看来ng2-charts没有提供触发更新的机制(根据此github问题).我对Angular2并没有很丰富的经验，但这也许对您有用吗?该方法来自zbagley在17天前发布的github问题中的评论中(不幸的是，我找不到一种方法来生成引用此特定评论的url).

However, it appears that ng2-charts doesn't provide a mechanism to trigger the update (as per this github issue). I'm not very experienced in Angular2 at all, but perhaps this will work for you? The approach was taken from a comment made by zbagley in the github issue posted 17 days ago (unfortunately I could not find a way to generate a url referencing this specific comment).

方法是在数据可用之前基本上不渲染图表.这是您的 component.ts 代码的更改.

The approach is to basically not render your chart until the data is available. Here is the change to your component.ts code.

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.

And then you would use ngIf in your component.html code.

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

这篇关于Angular2用标签更新ng2-图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！