循环数据并绘制图表,ngx-line-chart,

时间:2018-11-29 07:00:08

标签: angular angular5 angular-cli angular-chart ngx-charts

我是有角度和打字稿的新手。

我在这里使用服务在json中获取数据:

"data": 
[
    {   
        "invoice": [
            {
              "date": "2017-02-23",
              "nbre": 1
            },
            {
              "date": "2017-02-25",
              "nbre": 0
            },
            {
              "date": "2017-02-26",
              "nbre": 5
            }
            ...
        ]

        "order": [
            {
              "date": "2017-02-01",
              "nbre": 0
            },
            {
              "date": "2017-02-12",
              "nbre": 7
            },
            {
              "date": "2017-02-23",
              "nbre": 10
            }
            ...
        ]

    }
]

发票和订单数为144。

这是我的代码: dashbord.component.html

<ngx-charts-line-chart
                [view]="view"
                [scheme]="colorScheme"
                [results]="multi"
                [gradient]="gradient"
                [xAxis]="showXAxis"
                [yAxis]="showYAxis"
                [legend]="showLegend"
                [showXAxisLabel]="showXAxisLabel"
                [showYAxisLabel]="showYAxisLabel"
                [xAxisLabel]="xAxisLabel"
                [yAxisLabel]="yAxisLabel"
                [autoScale]="autoScale"
                [timeline]="timeline"
                (select)="onSelect($event)">
      </ngx-charts-line-chart>

dashbord.component.ts

  dataChart: any[];
  this.loadChartNouvo();
  private loadChartNouvo(){
    this._myRestService.getChartData().subscribe(
     res=>{  console.log(res['data']);
       if (res['status_code'] === 200){
          for (let i in res['data']['invoice']) {
           this.dataChart[0].series.push({"name":res['data']['invoice']['date'][i], "value":res['data']['invoice']['nbre'][i]});
        }

       }
     },err=>{}
        )
          }

如何循环处理我的数据json以与ngx图表一起显示?

以及如何使用循环放置系列名称(图表名称)?

注意:请问我的英语,

先谢谢您

0 个答案:

没有答案