вот и все, вы должны попробовать этот путь, он должен работать

инаю работать в эти дни с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 без данных и обновить его правильными метками и данными?

Любая помощь нужна, спасибо.