Google table 仅图表 returns 我的 REST 的一行 API

Question

我试图在 Google Table 图表 Angular 中显示 REST API 的数据，但在执行代码时，它只有returns最后一条记录，我想知道如何显示所有记录？

Table Picture

ngOnInit(){
    this.httpClient.get(this.url).subscribe((res: Data[]) => {
      Object.entries(res.countries).forEach(([y,v] )=> {





      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {



        var data = new google.visualization.DataTable();

        data.addColumn('string', 'Nombre Pais');
        data.addColumn('number', 'Nro de casos');


       data.addRows([
       [y,v['total_cases']],
        ]);
      console.log([v['total_cases']]);
        var table = new google.visualization.Table(document.getElementById('table_div'),);

        table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable',
        pageSize: 50}); }});

    }
    )}
      }

JSON结构：

{"countries":{"USA":{"country_name":"USA","total_cases":1735029,"total_recovered":481988,"total_deaths":101285},"Brazil":{"country_name":"Brazil","total_cases":394507,"total_recovered":158593,"total_deaths":24600},"Russia":{"country_name":"Russia","total_cases":370680,"total_recovered":142208,"total_deaths":3968},"Spain":{"country_name":"Spain","total_cases":283339,"total_recovered":196958,"total_deaths":27117},"UK":{"country_name":"UK","total_cases":267240,"total_recovered":null,"total_deaths":37460},"China":{"country_name":"China","total_cases":82993,"total_recovered":78280,"total_deaths":4634}}

Answer 1

您需要为每个构建数据，
在绘制图表之前。

请参阅以下代码片段...

ngOnInit() {
  this.httpClient.get(this.url).subscribe((res: Data[]) => {
    // build data
    var rawData = [];
    Object.entries(res.countries).forEach(([y, v]) => {
      rawData.push([y, v.total_cases]);
    });

    // draw chart
    google.charts.load('current', {
      packages: ['table']
    }).then(function () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Nombre Pais');
      data.addColumn('number', 'Nro de casos');
      data.addRows(rawData);

      var table = new google.visualization.Table(document.getElementById('table_div'),);
      table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable', pageSize: 50});
    });
  });
}

以下是一个工作示例...

var res = {"countries":{"USA":{"country_name":"USA","total_cases":1735029,"total_recovered":481988,"total_deaths":101285},"Brazil":{"country_name":"Brazil","total_cases":394507,"total_recovered":158593,"total_deaths":24600},"Russia":{"country_name":"Russia","total_cases":370680,"total_recovered":142208,"total_deaths":3968},"Spain":{"country_name":"Spain","total_cases":283339,"total_recovered":196958,"total_deaths":27117},"UK":{"country_name":"UK","total_cases":267240,"total_recovered":null,"total_deaths":37460},"China":{"country_name":"China","total_cases":82993,"total_recovered":78280,"total_deaths":4634}}};

var rawData = [];
Object.entries(res.countries).forEach(([y, v]) => {
  rawData.push([y, v.total_cases]);
});

google.charts.load('current', {
  packages: ['table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nombre Pais');
  data.addColumn('number', 'Nro de casos');
  data.addRows(rawData);

  var table = new google.visualization.Table(document.getElementById('table_div'),);
  table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable', pageSize: 50});
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

编辑

对 google 数据 table 进行排序，然后再绘图。

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nombre Pais');
  data.addColumn('number', 'Nro de casos');
  data.addRows(rawData);

  // sort data on first column
  data.sort([{column: 0}]);

  var table = new google.visualization.Table(document.getElementById('table_div'),);
  table.draw(data, {showRowNumber: true, width: '50%', height: '100%',page: 'enable', pageSize: 50});

Google table 仅图表 returns 我的 REST 的一行 API

Google table charts only returns one row of my REST API

javascript

rest

json

google-visualization

angular