ng2-charts從JSON加載數據

我懷疑如何正確加載圖形及其標籤的數據。ng2-charts從JSON加載數據

這是我的服務代碼： getinvfull() { return this._http.get (this.url + 'getinvfull'). map (res => res.json()); }

這是我的組件的代碼：

public lineChartData: Array <any> = []; 
        public lineChartLabels: Array <any> = []; 
        public lineChartOptions: any = { 
          responsive: true 
        }; 

        public lineChartLegend: boolean = true; 
        public lineChartType: string = 'line'; 

        
        // events 
        public chartClicked (e: any): void { 
          console.log (e); 
        } 

        public chartHovered (e: any): void { 
          console.log (e); 
        } 

  ngOnInit() { 
    console.log (this._invService.getinvfull()); 
    this._invService.getinvfull(). 
        data1 => { 
        if (! data1) { 
          console.log ('error loading data'); 
        } else { 
          this.resultData = data1; 
          this.barChartLabels = this.resultData.map (item => item.day); 

          var d = this.resultData.map (item => item.sensorluz1) 
          console.log ('this is the variable d' + d); 

          this.barChartData = this.resultData.map (item => item.sensorlight1); 
          this.data = this.barChartData; 

          console.log (this.barChartData); 
          console.log ('the variable data' + this.data); 

          this.loaded = true; 
        } 
      }, 
      error => { 
        console.log (<any> error); 
      } 
    ); 
  }

這是我的模板：

<div style = "display: block;"> 
        <canvas baseChart width = "400" height = "400" 
                    [datasets] = "lineChartData" 
                    [labels] = "lineChartLabels" 
                    [options] = "lineChartOptions" 
                    [colors] = "lineChartColors" 
                    [legend] = "lineChartLegend" 
                    [chartType] = "lineChartType" 
                    (chartHover) = "chartHovered ($ event)" 
                    (chartClick) = "chartClicked ($ event)"> </ canvas> 
        </ div>

我與測試lineChart圖表我的JSON是這樣的：

[{"id":13,"sensorluz1":"32","sensorluz2":"55","sensorluz3":"33","fecha":"2017-09-05T11:15:06.000Z"},{"id":16,"sensorluz1":"111","sensorluz2":"222","sensorluz3":"66","fecha":"2017-09-05T17:22:14.000Z"},{"id":17,"sensorluz1":"44","sensorluz2":"55","sensorluz3":"33","fecha":"2017-09-05T17:22:14.000Z"}]

我想在同一個圖中顯示日期和三種類型的傳感器。

我試圖用barChart的另一種類型的圖，我工作但不完全。

barChartOptions: any = { 
     scaleShowVerticalLines: false, 
     responsive: true, 
     scales: { 
      xAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    }; 
    barChartLabels: string[] =[]; 
    barChartType: string = 'horizontalBar'; 
    barChartLegend: boolean = true; 
    barChartData: any[] =[]; 
    resultData: Animal[] =[]; 
    loaded = false; 

ngOnInit(){ 
    console.log(this._invService.getinvfull()); 
    this._invService.getinvfull().subscribe(
     data1 => { 
     if (!data1) { 
      console.log('error al cargar datos'); 
     } else { 
      this.resultData = data1; 
      this.barChartLabels = this.resultData.map(item => item.fecha); 
      //this.lineChartLabels = this.resultData.map(item => item.fecha); 

      var d=this.resultData.map(item => item.sensorluz1) 
      console.log('esta es la variable d'+d); 

      this.barChartData = this.resultData.map(item => item.sensorluz1); 
      //let newChartData:Array<any> = []; 
      //newChartData.push({data: [1, 2], label: 'Series A'}, {data: [1, 2], label: 'Series B'}); 
      //this.lineChartData = newChartData; 
      this.data = this.barChartData; 

      console.log(this.barChartData); 
      console.log('la variable data'+this.data); 

      this.loaded = true; 
      //data = this.animals; 
     } 
     }, 
     error =>{ 
     console.log(<any>error); 
     } 
    ); 
    } 

<canvas *ngIf="loaded" baseChart [data]="barChartData" 
     [labels]="barChartLabels" [options]="barChartOptions" 
     [legend]="barChartLegend" [chartType]="barChartType" 
     (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"> 
     </canvas>

感謝您的幫助

來源

2017-09-06 Manolait

我已經找到了解決辦法，我把它留在的情況下這是值得一些其他用戶。

我的服務：

  

getinvfull() { 
    return this._http.get (this.url + 'getinvfull'). map (res => res.json()); 
  }

我的組件：

  public greenhouse: greenhouse []; 
  numbers = new Array (3); 

  public barChartOptions: any = { 
    scaleShowVerticalLines: false, 
    responsive: true 
  }; 
  public barChartLabels: string [] = []; 
  public barChartType: string = 'bar'; 
  public barChartLegend: boolean = true; 

  public barChartData: any [] = [ 
    {data: null, label: 'Series A'}, 
    {data: null, label: 'Series B'} 
  ]; 
    resultData: Greenhouse [] = []; 
    loaded = false; 

ngOnInit() { 
    console.log (this._invService.getinvfull()); 
    this._invService.getinvfull(). 
        response => { 
        if (! response) { 
          console.log ('error loading data'); 
        } else { 
          this.resultData = response; 
          this.barChartLabels = this.resultData.map (item => item.day); 

          var d1 = this.resultData.map (item => item.sensorluz1); 
          var d2 = this.resultData.map (item => item.sensorluz2); 
          var d3 = this.resultData.map (item => item.sensorluz3); 
          console.log ('this is the variable d1:' + d1); 
          console.log ('this is the variable d2:' + d2); 

          this.barChartData [0] = d1; 
          this.barChartData [1] = d2; 

          this.loaded = true; 
        } 
      }, 
      error => { 
        console.log (<any> error); 
      } 
    ); 
  }

我的HTML

  <div> 
  <div style = "display: block"> 
    <canvas * ngIf = "loaded" baseChart [data] = "barChartData" 
      [labels] = "barChartLabels" [options] = "barChartOptions" 
      [legend] = "barChartLegend" [chartType] = "barChartType" 
      (chartHover) = "chartHovered ($ event)" (chartClick) = "chartClicked ($ event)"> 
      </ canvas> 
  </ div> 
</ div>

問候和感謝。

來源

2017-09-07 08:40:34 Manolait

ng2-charts從JSON加載數據

回答

相關問題