Question

我正在尝试将我的网络API中的一些数据加载到谷歌桌面。

所以我的web api返回正确的数据。它返回2列数据，Name（string）＆amp;得分（双倍）。

我想用这些数据填充谷歌表，但不能完全看到如何做到这一点。我还想在添加数据之前指定列名称和类型。

以下是我到目前为止的尝试。任何帮助都会很棒。

我在最底部包含了一个加载表的工作示例，但数据是硬编码的。

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

使用ajax填充Google可视化表

0 个答案: