заполнение таблицы визуализации Google с помощью AJAX - PullRequest
Новая
       31

заполнение таблицы визуализации Google с помощью AJAX

0 голосов
/ 05 июня 2018

Я пытаюсь загрузить некоторые данные из моего веб-API в таблицу Google.

Таким образом, мой веб-API возвращает правильные данные.Он возвращает 2 столбца данных: имя (строка) и счет (двойной).

Я хочу заполнить таблицу Google этими данными, но не совсем понимаю, как это сделать.Я также хочу указать столбец Имена и типы перед добавлением данных.

Ниже приведена моя попытка.Любая помощь была бы полезна.

В самом низу я включил рабочий пример загрузки таблицы, однако данные жестко запрограммированы. 

<!DOCTYPE html>
<html>
<head>
    <title>QES</title>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>


 <div id="tableScore"></div>


<script type="text/javascript">
    $(document).ready(function()
    {
        google.charts.load('current', {'packages':['table']});
        google.charts.setOnLoadCallback(drawTable);

        function DrawTable() {

            var options = { title: 'Top Scores', showRowNumber: true, width: '75%', height: '75%' };

            $.ajax({
                type: 'GET',
                url: 'api/Score',
                dataType: 'json',
                success: function (data) {
                    $.ajax({

                        var arrValues = {['Name', 'Score']};

                        $.each(data, function(){
                           arrValues.push(data.Name, data.Score);
                        });
                }
            });

            var table = new google.visualization.Table(document.getElementById('tableScore'));
            table.draw(arrValues, options);
        };
      });
</script>



</body>
</html>

версия статических данных, которая работает

  <script type="text/javascript">
  google.charts.load('current', {'packages':['table']});
  google.charts.setOnLoadCallback(drawTable);

  function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Score');

    data.addRows([
      ['Tom',  2.5],
      ['Jack', 8.5]
    ]);

    var table = new google.visualization.Table(document.getElementById('tblScore'));

    table.draw(data, {showRowNumber: true, width: '75%', height: '75%'});
  }
</script>
...