大佬教程收集整理的这篇文章主要介绍了angular – 无法使用API获取的数据初始化ngx图表,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我建立了一个休息api,通过正确的调用,吐出一些时间序列数据.
{ "prices": [ { "item": "1","price": 2,"estimated": 2.1,"date": [ 2012,8,16 ] },{ "item": "1","price": 3,"estimated": 4.1,9,"price": 5,"estimated": 7.1,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; showLe@R_696_11064@ = true; showXAxisLabel = true; xAxisLabel = 'Dates'; showYAxisLabel = true; yAxisLabel = 'Prices'; colorscheR_862_11845@e = { 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" [scheR_862_11845@e]="colorscheR_862_11845@e" [results]="ngxData.data" [gradient]="gradient" [xAxis]="showXAxis" [yAxis]="showYAxis" [le@R_696_11064@]="showLe@R_696_11064@" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel" [autoScale]="autoScale"> </ngx-charts-line-chart>
在Object.assign之前记录this.ngxData.data打印一切就好了
但我最终得到了以下结果
我按照here可用的示例进行操作,但最终没有实际显示的数据.
我不明白为什么,即使数据格式化为库所需,数据也不会显示.
应检测重新分配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],value: p.estimated }) }); //your solution this.ngxData.data = [...this.ngxData.data]; },(err) => { console.log(err); }); }
我设法添加了一个plunker https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview
以上是大佬教程为你收集整理的angular – 无法使用API获取的数据初始化ngx图表全部内容,希望文章能够帮你解决angular – 无法使用API获取的数据初始化ngx图表所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。