网页加载时没有填充谷歌表格答案

【问题标题】：google table not populating when web page loads网页加载时没有填充谷歌表格
【发布时间】：2018-06-06 08:31:42
【问题描述】：

我正在尝试填充 google 可视化表。当我的网页加载时，我希望填充表格，但目前什么都没有发生，我不知道为什么？

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

【问题讨论】：

标签： jquery asp.net ajax google-api google-visualization

【解决方案1】：

在绘制图表之前，您必须等待 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);
};

【讨论】：

感谢它现在的工作。一个小问题，我应该在每张桌子之前都有 google.charts.load('current', { packages: ['table'] }).then 吗？我以为是全球性的
不，它只需要运行一次，之后可以根据需要绘制任意数量的表格