如何从 JSON 获取数据以在 PrimeNG 折线图中使用？

Posted 2023-03-13

【中文标题】如何从 JSON 获取数据以在 PrimeNG 折线图中使用？

【英文标题】：How do I get data from JSON to use in PrimeNG line Chart?

【发布时间】：2018-04-07 04:36:13

【问题描述】：

我正在尝试将数据从我的 API 加载到 PrimeNG 图表中，但没有任何运气。目前我一直在尝试做的是订阅从我的 API 获取数据的服务。

我认为我可以做的是从我的组件中订阅该数据，重新格式化并将其推送到局部变量数组。

我遇到的问题是，一旦我从 observable 外部调用数组，数据似乎就在嵌套。

来自我的 API 的数据格式如下：

    "data": [
        
            "sr_count": 117,
            "month_name": "October",
            "month_num": 10,
            "year": 2017
        ,
        
            "sr_count": 34,
            "month_name": "September",
            "month_num": 9,
            "year": 2017
        
    ]

我的数据获取服务

export class ReportService 
  private reportUrl: string = environment.reportUrl;

  constructor(private http: Http) 

  /**
   * Get all SRs
   */
  getSR(groupBy: string, beginDate:string, endDate:string): Observable<Report[]> 

    return this.http.get(`$this.reportUrl/SR?group_by="$groupBy"&begin_date="$beginDate"&end_date="$endDate"`)
      .map(res => res.json().data)
      .catch(this.handleError);
  

我的组件

ngOnInit()
.
.
.


        let newData = [];
        let dataSet1= [];
        let labels = [];
        this.reportService.getSR('Month', lastMonth, today)
        .subscribe(data => 
            dataSet1.push(data.map(a => a.sr_count))

            let monthName = data.map(item => 
                return item.month_name
            )
            labels.push.apply(labels, monthName)
            console.log(labels) //["October", "September"]
        );


        console.log(labels) // I think its [["October", "September"]]
        console.log(newData) // [[109,34]]

        this.data = 
            labels: labels, //undefined
            datasets: [
                
                    label: 'First Dataset',
                    data: dataSet1, //undefined
                    fill: false,
                    borderColor: '#4bc0c0'
                

            ]
        
    

这也可能是我的误解。我假设数组嵌套在变量之外，因为这就是它在 chrome 控制台中的样子

如果能帮助我走上正确的道路，我们将不胜感激！我已经尝试过、连接、push.apply 甚至 lodash 来尝试扁平化数组。这三个都给了我[]的结果。

我还尝试将 this.data 放在我的 observable 中。发生这种情况时，我无法从 primeNG 代码<p-chart type="line" [data]="data"></p-chart> 访问数据我还认为，如果尝试使用多个 API 调用来加载数据集，那么这样做会很麻烦。

【参考方案1】：

终于想通了。分享答案，以防有人遇到这个问题。

将数据从我的 observable 获取到 this.data 的正确方法是

        this.reportService.getSR('Day', lastMonth, today)
    .subscribe(data => 
        this.data.datasets[0].data = data.map(a =>  a.sr_count);
        this.data.labels = data.map(a =>  a.day_name);
        this.chart.refresh();

    );