在尝试初始化使用ngx-charts和 API 获取的数据构建的图表时，我遇到了一些糟糕的情况。
我构建了一个 rest api，在适当的调用后，它会吐出一些时间序列数据。
{
"prices": [
{
"item": "1",
"price": 2,
"estimated": 2.1,
"date": [
2012,
8,
16
]
},
{
"item": "1",
"price": 3,
"estimated": 4.1,
"date": [
2012,
9,
16
]
},
{
"item": "1",
"price": 5,
"estimated": 7.1,
"date": [
2012,
10,
16
]
}
]
}
我建立了 price.model.ts来正确处理它，它工作得很好
export class PriceModel {
public id: string;
public price: number;
public estimated: number;
public date: number[];
constructor(
id: string,
price: number,
estimated: number,
date: number[]
) {
this.id = id;
this.price = price;
this.estimated = estimated;
this.date = date;
}
}
然后，我设置了details.component.ts以执行此类 api 调用、获取数据、解析数据并将其呈现到图表中。
import { Component } from '@angular/core';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { Http } from '@angular/http';
/** App Models **/
import { PriceModel } from '../../shared/components/prices/price.model';
import { ChartDataModel } from '../../shared/components/prices/chart-data.model';
@Component({
selector: 'app-details',
templateUrl: './details.page.html',
providers: [NgxChartsModule]
})
export class DetailsPage {
private sub: any;
private prices: PriceModel[];
ngxData: ChartDataModel = {
data: [
{
name: 'prices',
series: []
},
{
name: 'forecast',
series: []
}
]
};
view: any[] = [1000, 750];
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = true;
showXAxisLabel = true;
xAxisLabel = 'Dates';
showYAxisLabel = true;
yAxisLabel = 'Prices';
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
// line, area
autoScale = true;
constructor(private _http: Http) {
console.log(this.ngxData.data);
Object.assign(this.ngxData);
}
ngOnInit() {
this.sub = this._http.get('someroute').subscribe((prices) => {
this.prices = prices.json().prices;
let currData;
this.prices.map((p) => {
currData = new Date(p.date[0], p.date[1], p.date[2]);
this.ngxData.data[0].series.push({ name: currData.getTime().toString(), value: p.price });
this.ngxData.data[1].series.push({ name: currData.getTime().toString(), value: p.estimated });
});
}, (err) => {
console.log(err);
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
我的ChartDataModel.ts定义为
export class ChartDataModel {
public data: SerieModel[];
constructor(data: SerieModel[]) {
this.data = data;
}
}
export class SerieModel {
public name: string;
public series: SeriersChildModel[];
constructor(name: string, series: SeriersChildModel[]) {
this.name = name;
this.series = series;
}
}
export class SeriersChildModel {
public name: string;
public value: number;
constructor(name: string, value: number) {
this.name = name;
this.value = value;
}
}
最后，这是我的details.page.html
<ngx-charts-line-chart
[view]="view"
[scheme]="colorScheme"
[results]="ngxData.data"
[gradient]="gradient"
[xAxis]="showXAxis"
[yAxis]="showYAxis"
[legend]="showLegend"
[showXAxisLabel]="showXAxisLabel"
[showYAxisLabel]="showYAxisLabel"
[xAxisLabel]="xAxisLabel"
[yAxisLabel]="yAxisLabel"
[autoScale]="autoScale">
</ngx-charts-line-chart>
this.ngxData.data打印之前记录Object.assign一切都很好
但我最终得到以下结果
我按照此处提供的示例进行操作，但最终没有实际显示任何数据。
我不明白为什么，即使数据按照图书馆的要求进行了格式化，也没有显示数据。
我究竟做错了什么？是不是构造函数初始化错误造成的？