angular – 无法使用API??获取的数据初始化ngx图表
发布时间:2020-12-17 17:03:19 所属栏目:安全 来源:网络整理
导读:在尝试初始化使用 ngx-charts使用API??获取数据构建的图表时,我遇到了一些不愉快的时期. 我建立了一个休息api,通过正确的调用,吐出一些时间序列数据. { "prices": [ { "item": "1","price": 2,"estimated": 2.1,"date": [ 2012,8,16 ] },{ "item": "1","pric
在尝试初始化使用
ngx-charts使用API??获取数据构建的图表时,我遇到了一些不愉快的时期.
我建立了一个休息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; 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],value: p.estimated }) }); //your solution this.ngxData.data = [...this.ngxData.data]; },(err) => { console.log(err); }); } 我设法添加了一个plunker https://plnkr.co/edit/JSTcS4FnJ5dshAldLWPL?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |