Question

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

这是我服务的代码： g++ efficient_string_concatenation.cpp -std=c++11 -O3

这是我的组件的代码：

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

我正在使用lineChart图表进行测试我的JSON是这样的：

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

我想在同一图表中显示日期和三种类型的传感器。

我尝试使用barChart的其他类型的图表，但是我工作但不完全。

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

感谢您的帮助

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>

问候并谢谢你。

ng2-charts从JSON加载数据

1 个答案: