Angular2使用标签更新ng2图表

问题描述：

我现在开始与Angular2一起工作，并对框架ng2-charts有疑问。Angular2使用标签更新ng2图表

这里是我的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组件在开始时接受了变量并更新它们。因此，当标签为空时，即使我添加了一些标签，它们也会被添加为未定义的标签。所以我有一个正确的值的图表，但没有正确的标签。一切标记为未定义。

如果我在一开始启动的标签，我会用正确的价值观

良好的彩色图表所以我的问题是：

如何加载数据，然后渲染HTML零件？

无论如何渲染没有数据的chart.js组件并用正确的标签和数据更新它？

任何帮助是必要的，谢谢。

答

在标准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>

我从Web服务将数据作为图表数据源同样的问题。 –

非常感谢，对我来说工作得很好。我刚看到答案:)。我用了一个ngIf来测试是否有数据，它的工作 – ben

感谢我的工作.. –

答

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

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

有没有更新图表的方法。从Web服务收到数据之前，似乎图表已加载。

isDataAvailable2 = true

但是图表从不加载。

答

首先你要确保标签的顺序匹配data_set的顺序，因此basicly你有这两个变量：

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>

多数民众赞成，你应该尝试这种方式，它应该工作

答

我通过更新config属性中的标签更新了图表标签。

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图表

相关推荐