无法使用 API 获取的数据初始化 ngx-charts
Unable to Initialize ngx-charts with API fetched Data
我在尝试初始化使用 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>
在 Object.assign
之前记录 this.ngxData.data
打印一切正常
但我最终得到了以下结果
我按照可用的示例进行操作 here,但最终没有实际显示任何数据。
我不明白为什么,即使数据按照图书馆的要求格式化,数据也没有显示。
我做错了什么?是不是构造函数初始化错误导致的?
您的问题是关于修改系列 ngxData.data[x]series.push()
未被更改检测识别。
重新分配 ngxData.data
应该被检测到:this.ngxData.data = [...this.ngxData.data]
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 })
});
//your solution
this.ngxData.data = [...this.ngxData.data];
}, (err) => {
console.log(err);
});
}
我成功添加了一个 plunker https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview
我在尝试初始化使用 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>
在 Object.assign
之前记录 this.ngxData.data
打印一切正常
但我最终得到了以下结果
我按照可用的示例进行操作 here,但最终没有实际显示任何数据。
我不明白为什么,即使数据按照图书馆的要求格式化,数据也没有显示。
我做错了什么?是不是构造函数初始化错误导致的?
您的问题是关于修改系列 ngxData.data[x]series.push()
未被更改检测识别。
重新分配 ngxData.data
应该被检测到:this.ngxData.data = [...this.ngxData.data]
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 })
});
//your solution
this.ngxData.data = [...this.ngxData.data];
}, (err) => {
console.log(err);
});
}
我成功添加了一个 plunker https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview