javascript - 错误 : You called the draw() method with the wrong type of data rather than a DataTable or DataView

Question

我使用 MYSQL-PHP-JSON-Javascript 创建了一个 google 图表图表的代码在这里:

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

当我加载页面时，它显示错误:

You called the draw() method with the wrong type of data rather than a DataTable or DataView.

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

我已经阅读了 google forum/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 传递给变量数据的内容: var data = new google.visualization.DataTable();

Answer 1

删除 jsapi 并只使用 loader.js

根据release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

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

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

和回调...

google.charts.setOnLoadCallback(drawChart);