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>

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

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

刷新页面可以消除此错误，并完美显示我的饼图。

我已经阅读了Google论坛/ 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（）;

Answer 1

删除jsapi并仅使用loader.js

根据release notes ...

通过jsapi加载程序仍然可用的Google Charts版本不再保持一致更新。从现在开始，请使用新的静态加载器。

使用loader.js时，load语句应为...

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

和回调...

google.charts.setOnLoadCallback(drawChart);

错误：您使用错误的数据类型而不是DataTable或DataView调用了draw（）方法

1 个答案: