加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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打印一切就好了

enter image description here

但我最终得到了以下结果

enter image description here

我按照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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读