Question

我正在尝试填充谷歌浏览表。当我的网页加载时，我希望表格填充但是目前没有任何事情发生，我不知道为什么？

来自我的网络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>

Answer 1

在绘制图表之前，您必须等待谷歌图表和ajax调用才能完成您还需要等待页面加载，但google.charts.load默认情况下会这样做，
不需要 - ＆gt; $(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);
};

加载网页时，Google桌面不会填充

1 个答案: