таблица Google не заполняется при загрузке веб-страницы - PullRequest
Новая
       13

таблица Google не заполняется при загрузке веб-страницы

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

Я пытаюсь заполнить таблицу Google Visulation.Когда моя веб-страница загружается, я хочу, чтобы таблица заполнялась, однако в настоящее время ничего не происходит, и я не знаю, почему?

Данные, поступающие с моего веб-API, верны, пример ниже, 

<ArrayOfPosition xmlns:i="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.datacontract.org/2004/07/WebPerformance.Models">
<Position>
<DatePos>2018-06-04T00:00:00</DatePos>
<Name>Hannah</Name>
<StudentId>6643</StudentId>
<NrScore>4.8448741436004639</NrScore> 
</Position>
<Position>
<DatePos>2018-06-04T00:00:00</DatePos>
<Name>Natalie</Name>
<StudentId>2413</StudentId>
<NrScore>4.4401325285434723</NrScore>
</Position>
</ArrayOfPosition>

Ниже приведен мой HTML-код. 

<!DOCTYPE html>
<html>
<head>
<title>Scores</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>

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

        $.ajax({
            type: 'GET',
            url: 'api/Score',
            dataType: 'json',
            success: function (data) {
                DrawTable(data);
            },
            error: function () {
                alert("Error loading data! Please try again");
            }
        });            
    });


    function DrawTable(dataValues) {

        var data = new google.visualization.DataTable();
        var options = { title: 'Top Scores', showRowNumber: true, width: '75%', height: '75%' };

        data.addColumn('string', 'Name');
        data.addColumn('number', 'Score');

        for (var i = 0; i < dataValues.length; i++)
        {
            data.addRow([dataValues[i].Name, dataValues[i].NrScore]);
        }

        var table = new google.visualization.Table(document.getElementById('tableScore'));
        table.draw(data, options);
    };

    </script>

   </head>
   <body>
   <div id="tableScore"></div>
   </body>
   </html>

1 Ответ

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

перед тем, как нарисовать диаграмму, вы должны подождать и на графиках Google, и на вызове ajax, чтобы завершить
, вам также нужно дождаться загрузки страницы, но google.charts.load сделает это по умолчанию,
не нужнодля -> $(document).ready

попробуйте следующую настройку ... 

google.charts.load('current', {
    packages: ['table']
}).then(function () {
    $.ajax({
        type: 'GET',
        url: 'api/Score',
        dataType: 'json',
        success: function (data) {
            DrawTable(data);
        },
        error: function () {
            alert("Error loading data! Please try again");
        }
    });
});

function DrawTable(dataValues) {
    var data = new google.visualization.DataTable();
    var options = { title: 'Top Scores', showRowNumber: true, width: '75%', height: '75%' };

    data.addColumn('string', 'Name');
    data.addColumn('number', 'Score');

    for (var i = 0; i < dataValues.length; i++)
    {
        data.addRow([dataValues[i].Name, dataValues[i].NrScore]);
    }

    var table = new google.visualization.Table(document.getElementById('tableScore'));
    table.draw(data, options);
};
...