API 对 Google 图表（ng2-google-图表）上数据表格式调用的格式化对象

Question

我正在使用 ng2-google-charts 在 Angular 10 项目中构建 geoChart。一切都适用于固定数据，我遇到的问题是我不确定如何格式化（和添加）来自 API 调用的数据。

这是我的 geoChart 属性，可以完美地处理固定数据

public geoChart: GoogleChartInterface = {
   chartType: 'GeoChart',    
   dataTable: [
     ['Country', 'Ice Machines'],
     ['Austria', 1],
     ['Belgium', 2],
     ['Bulgaria', 3],    
   ],
   options: {},
};

这是我从 API 收到的对象 (data.response) --> [{...}, {...}, {...}, {...}, {...}, {...}]

0: {paisCode: "DE", total: 1}
1: {paisCode: "DK", total: 1}
2: {paisCode: "ES", total: 1}
3: {paisCode: "FR", total: 1}
4: {paisCode: "NL", total: 1}
5: {paisCode: "RO", total: 1}
length: 6

这就是我正在尝试的：

data.response.forEach(element => {
   let countryCode = element.paisCode;
   let totalPerCountry = element.total;
   //formattedDataMap +=  "[" + "'" + countryCode +"'" + ',' + totalPerCountry + "],";
   this.geoChart.dataTable.push('[' + countryCode + ',' + totalPerCountry + ']')
   formattedDataMap.push('[' + countryCode + ',' + totalPerCountry + ']')
   //console.log(formattedDataMap);
})

但是数据没有添加正确:

0: (2) ["Country", "Total"]
1: (2) ["Austria", 1]
2: (2) ["Belgium", 2]
3: (2) ["Bulgaria", 3]
4: "[DE,1]"
5: "[DK,1]"
6: "[ES,3]"
7: "[FR,1]"
8: "[NL,1]"
9: "[RO,1]"

更新： 我已经更新了我的方法，但是数组没有任何反应。大小相同，元素相同。

  async myMethod() {
     if (this.account.email) {
        (await this.myService.MyMethod())
        .pipe(first())
        .subscribe(async (data: any) => {        
           this.geoChart.dataTable.concat(                
             data.response.reduce((acc, curr) => {
             acc.push([curr['paisCode'], curr['total']]);
             return acc;
           }, [])
        ); 
        console.log(this.geoChart.dataTable);
    });       
   }
 }

Answer 1

您生成的是字符串而不是数组。您可以尝试使用 Array#reduce 方法修改 API

中的数据

const input = [{paisCode: "DE", total: 1}, {paisCode: "DK", total: 1}, {paisCode: "ES", total: 1}, {paisCode: "FR", total: 1}, {paisCode: "NL", total: 1}, {paisCode: "RO", total: 1}];

const output = input.reduce((acc, curr) => {
  acc.push([curr['paisCode'], curr['total']]);
  return acc;
}, []);

console.log(output);

在你的情况下，它看起来像下面这样

this.someService.getData().subscribe({
  next: data => {
    this.geoChart.dataTable.concat(                     // <-- append new values to exisiting values
      data.response.reduce((acc, curr) => {
        acc.push([curr['paisCode'], curr['total']]);
        return acc;
      }, [])
    );
  },
  error: error => {
    // handle error
  }
});

您还可以使用 Array#concat 方法将新值附加到现有值。

Answer 2

使用地图有效：

   data.response.map(item => {
      this.geoChart.dataTable.push([item.paisCode, item.total]);
   })

API 对 Google 图表（ng2-google-图表）上数据表格式调用的格式化对象

Format object from API call to dataTable format on Google Charts (ng2-google-charts)

foreach

angular

ng2-google-chart