ng2-charts Daten von JSON laden

Question

Ich habe Zweifel, wie man die Daten der Grafik und des Etiketts korrekt lädt.

Dies ist der Code für meinen Dienst: getinvfull() {     return this._http.get (this.url + 'getinvfull'). map (res => res.json());   }

Dies ist der Code meiner Komponente:

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); 
      } 
    ); 
  } 

das ist meine Vorlage:

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

ich mit der Prüfung bin lineChart chart mein JSON ist dies:

[{"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"}] 

Ich möchte das Datum und die drei Arten von Sensoren in der gleichen Grafik zeigen.

Ich versuchte mit einer anderen Art von Grafik mit dem BarChart und ich arbeite etwas, aber nicht ganz.

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> 

Danke für die Hilfe

Answer 1

ich schon die Lösung gefunden, lasse ich es, falls es zu einem anderen Benutzer wert ist.

Mein Service:

  

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

Meine Komponente:

  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); 
      } 
    ); 
  } 

Mein 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> 

Grüße und danke.