ng2-charts 从 JSON 加载数据

Question

我对如何正确加载图形及其标签的数据有疑问。

这是我的服务的代码： 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>

我正在使用折线图进行测试 我的 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>

感谢您的帮助

Answer 1

我已经找到了解决方案，我将它留给其他用户。

我的服务：

 

 

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>

您好，谢谢。