时间戳

首页 > 解决方案 > 错误：您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法

javascript - 错误：您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法

问题描述

我使用 MYSQL-PHP-JSON-Javascript 创建了一个谷歌图表，图表的代码在这里：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.load = google.load || google.charts.load;
    google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(<?=$jsonTable?>);

      var options = {
            title: 'Req',
          is3D: 'true',          
          width: 750,
          height: 450,
          slices: [{'color':'#581845'},{'color': '#900C3F'},{'color': '#C70039'},{'color': '#FF5733'},{'color': '#FFC300'},{'color': '#DAF7A6'},{'color': '#3498DB'}]
        };
      // Instantiate and draw our chart, passing in some options.
      // Do not forget to check your div ID
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
</script>

当我加载页面时，它向我显示一个错误：

您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法。

页面上的刷新消除了这个错误并完美地显示了我的饼图。

我已经阅读了谷歌论坛/stackoverflow 上的帖子并添加了额外的代码

google.load = google.load || google.charts.load;
google.setOnLoadCallback = google.setOnLoadCallback || google.charts.setOnLoadCallback;

并且还添加了 loader.js 脚本。似乎没有什么可以解决这个问题。还有其他方法可以解决此问题吗？

我用它来创建 json 表：PHP MySQL Google Chart JSON - Complete Example

我的 Json 表是这样的：

({"cols":[{"label":"Components","type":"string"}, 
{"label":"Count","type":"number"}],"rows":[{"c":[{"v":"SWa"},{"v":600}]}, 
{"c":[{"v":"Sris"},{"v":142}]},{"c":[{"v":"Sgri"},{"v":86}]},{"c": 
[{"v":"Shw"},{"v":36}]},{"c":[{"v":"Syus"},{"v":23}]},{"c":[{"v":"Other"}, 
{"v":21}]},{"c":[{"v":"yutf"},{"v":45}]},{"c":[{"v":"yutr"},{"v":11}]},{"c": 
[{"v":"duh"},{"v":4}]},{"c":[{"v":"Fgth"},{"v":5}]},{"c":[{"v":"Sys"}, 
{"v":34}]},{"c":[{"v":"Opyu"},{"v":6}]},{"c":[{"v":"jth"},{"v":78}]},{"c": 
[{"v":"Unspecified"},{"v":1}]}]});

所以这就是进入 google.visualization.DataTable 的内容，并将 dataTable 传递给变量 data： var data = new google.visualization.DataTable();

标签： javascriptjquerychartsgoogle-visualization

解决方案

删除jsapi并使用loader.js

根据发行说明...

通过 jsapi 加载器仍然可用的 Google Charts 版本不再持续更新。请从现在开始使用新的 gstatic 加载器。

使用时loader.js，load语句应该是... 

google.charts.load('current', {packages: ['corechart']});

和回调... 

google.charts.setOnLoadCallback(drawChart);

推荐阅读