动态图表数据

时间:2019-09-27 11:01:08

标签: angular typescript chart.js

我正在进行一次电话呼叫,并想用从该呼叫获得的数据填充pieChartData。但是,我无法这样做。我该怎么办?

import { Component, OnInit} from '@angular/core';
import config from '../../config.json';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analytics',
  templateUrl: './analytics.component.html',
  styleUrls: ['./analytics.component.css']
})
export class AnalyticsComponent  {
  public clickData;
  public dataExtracted=[];
  //public pieChartData=[0,0,0,0,0,0,0,0,0,0];
  private readonly CLICK_DATA_GET = config["SettingsInfo"]['clickDataFetchEndpoint'];
  public pieChartLabels:string[] = ['SC', 'CONF', 'ISS','KB','LOC','APP','PORTAL','UD','ANA','WATCH'];
  public pieChartData=this.dataExtracted;
  public pieChartType:string = 'pie';


  constructor(private httpClient: HttpClient) { 
     this.getClickData();
    //  console.log("Array "+this.dataExtracted);

  }
  getClickData()  {
    var pieChartData=[0,0,0,0,0,0,0,0,0,0];
    this.httpClient.get(this.CLICK_DATA_GET).subscribe(
        (data) => {
          this.clickData=data;
          console.log("DATA COMING "+JSON.stringify(this.clickData));
          for(var i=0;i<this.clickData.length;i++){
            var type=this.clickData[i].u_type;
            switch(type){
              case "SC": pieChartData[0]+=1; console.log(pieChartData[0]); break;
              case "CONF": pieChartData[1]+=1; console.log(pieChartData[1]); break;
              case "ISS": pieChartData[2]+=1; console.log(pieChartData[2]); break;
              case "KB": pieChartData[3]+=1; console.log(pieChartData[3]); break;
              case "LOC": pieChartData[4]+=1; console.log(pieChartData[4]); break;
              case "APP": pieChartData[5]+=1; console.log(pieChartData[5]); break;
              case "PORTAL": pieChartData[6]+=1; console.log(pieChartData[6]); break;
              case "UD": pieChartData[7]+=1; console.log(pieChartData[7]); break;
              case "ANA": pieChartData[8]+=1; console.log(pieChartData[8]); break;
              case "WATCH": pieChartData[9]+=1; console.log(pieChartData[9]); break;
              default:
                    console.log("type:" + type + " not handled");
                    break;
            }
          }
          console.log("ARRAY BEING RETURNED "+pieChartData);
          this.dataExtracted=pieChartData;
        }

    )




    // public pieChartData:number[] 
    // public pieChartType:string = 'pie';    
}}

// getClickDataCallback(data: object) {
//   this.setSettings(data);
//   this.settingsUpdate.emit();
// }

基本上,pieChartData为空或填充零。我想用本地pieChartData(在getClickData()函数中)填充pieChartData

1 个答案:

答案 0 :(得分:0)

我认为正在改变

console.log("ARRAY BEING RETURNED "+pieChartData);
this.dataExtracted = pieChartData;

console.log("ARRAY BEING RETURNED "+pieChartData);
this.pieChartData = this.dataExtracted = pieChartData;

会的。

当您分配this.pieChartData = this.dataExtracted时,并不意味着当您进行this.dataExtracted = something else时,this.pieChartData将自动为相同的值。实际上,它将指向与以前相同的旧对象。