Question

我想显示JSON数据的折线图。我使用过angular2-highcharts。问题是图表显示没有数据。我认为问题在于从JSON中提取数据。

JSON格式如下所示：

[{"_id" : ObjectId("59049a7b223f1e21ee4ee23b"),"amount" : 1,"date" : 
 "Mon, 18 Dec 1995 18:28:35 GMT"},{"_id" : 
  ObjectId("59049a7b223f1e21ee4ee23b"),"amount" : 1,"date" : "Mon, 18 
  Dec 1995 19:28:35 GMT"}]

我只需要＆＃34;金额＆＃34;在X值和＆＃34;日期＆＃34;在Y值。这是我的代码

ChartistJs.service.js

  import {Injectable} from '@angular/core';
  import { Headers, Http, RequestOptions, Response } from '@angular/http';
  import { Observable }     from 'rxjs/Observable';
  import 'rxjs/add/operator/map';
  import { Data } from "./Data";
  import 'rxjs/add/operator/toPromise';

  private Url ='http://localhost:3000/transfer/chart'; 
  constructor (private http: Http) {}
  getData(){
  return this.http.get(this.Url)
             .toPromise()
             .then(response => response.json())
             .catch(this.handleError);
        }

ChartistJs.component.ts

 import {Component} from '@angular/core';
 import {ChartistJsService} from './chartistJs.service';
 import 'style-loader!./chartistJs.scss';
 import { Observable } from "rxjs/Observable";
 import { ChartModule } from 'angular2-highcharts';
 import 'rxjs/Rx';
 import {Observer} from 'rxjs/Observer';
 import {Http, Jsonp} from '@angular/http';

 @Component({
 selector: 'chartist-js',
 template: `
  <chart [options]="options"></chart>
 `,
 providers : [ChartistJsService]
   })

export class ChartistJs {
options: Object;
constructor(private _chartistJsService:ChartistJsService) {
var chartData = this._chartistJsService.getData(); 
this.options = {
        title : { text : 'simple chart' },
        xAxis: {
            type: 'category'
        },
        series: [{
          data: chartData

        }]
     };
  }
}

你能帮我解决如何处理Angular 2中的JSON数据吗？

Answer 1

作为Pankaj points out，您尝试将 promise 作为数据传递，而不是承诺最终解析为的实际数据。但更广泛地说，您并没有真正使用Angular提供的用于处理HTTP的工具。

一般情况下，我建议您：

习惯于处理observable，这是Angular本身使用的，而不是将所有内容转换回promises（虽然我认为它们仍然在文档中显示）;和
利用AsyncPipe将它们解析为您的模板以及RxJS提供的用于操纵数据流的对象，倾向于异步性的异步性质。

更具体地说，这是您可以实现目前尝试的一种方式。

服务：

@Injectable()
class DataService {

  // acts as a pipe for the data that you can push new items into
  private dataSubject = ReplaySubject(1);

  // takes the subject and exposes the result, read-only
  chartData$ = this.dataSubject.asObservable();

  constructor (private http: Http) {}

  getData() {
    // GETs the data and pushes it into the subject
    this.http.get('http://localhost:3000/transfer/chart')
      .map(response => response.json())
      .subscribe(data => this.dataSubject.next(data));
  }
}

组件：

@Component({
  ... ,
  // resolves the chart options asynchronously in the template
  template: `
    <chart [options]="chartOptions$ | async"></chart>
  `
})
export class MyChartComponent implements OnInit {
  chartOptions$: Observable<any>;

  constructor(dataService: DataService) {
    // creates a new observable of the chart options
    this.chartOptions$ = this.dataService.chartData$
      .map(data => this.createChartOptions(data));
  }

  ngOnInit() {
    // triggers a fetch of the data to feed the observable
    this.dataService.getData();
  }

  private createChartOptions(data) {
    return {
      title: { text: 'simple chart' },
      xAxis: { type: 'category' },
      series: [{ data: data }],
    };
  }
}

您可能需要对JSON执行更多操作，而不仅仅将其作为series.data传递，但这有助于您了解如何利用可观察事件可以提供的事件流。我已经写了更多关于这个on my blog的文章，包括关于测试的后续文章。

另请注意，您的组件不应从'@angular/http'导入任何内容 - 将其留给服务，将它们用作数据源的抽象层 - 您可以在模块中加载提供程序，而不是组件，级别。

Answer 2

实际上，chartData变量确实保留Promise方法返回的getData。您应该.then保留getData方法calla，并将options分配给chartData，如下所示。

如果你能在ngOnInit生命周期事件中做同样的事情，那就更好了。

<强>代码

export class ChartistJs {
  options: Object;
  constructor(private _chartistJsService: ChartistJsService) {}
  ngOnInit() {
   this._chartistJsService.getData().then(
    (data) => {
      this.options = {
        title: {
          text: 'simple chart'
        },
        xAxis: {
          type: 'category'
        },
        series: [{
          data: data
        }]
      };
    }
   );
  }
}

使用angular2-highcharts显示折线图

2 个答案: