Табличные диаграммы Google возвращают только одну строку моего REST API - PullRequest
Новая
       25

Табличные диаграммы Google возвращают только одну строку моего REST API

1 голос
/ 27 мая 2020

Я пытаюсь показать данные REST API в Google Table Charts с помощью Angular, но в момент выполнения кода он возвращает только последнюю запись, я хотел бы знать, как я могу показать все записи?.

Изображение таблицы 

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}}

1 Ответ

0 голосов
/ 28 мая 2020

вам необходимо построить данные для каждого,
перед рисованием диаграммы.

см. Следующий фрагмент ... 

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>

EDIT

отсортируйте google таблицу данных перед рисованием. 

  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});
...