Question

我正在尝试使用带有Ajax＆amp;的google数据表来创建表格。 json。当用户从selectbox中选择文件时，它将文件数据作为json与php＆amp; jquery ajax。

以下是json数据示例：

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

这是我的jQuery Ajax调用：

 google.load("visualization", "1", {packages:["table"]});
  google.setOnLoadCallback(drawTable);

  $(document).on("change","select#source",function(){

            var source=$("select#source option:selected").attr("value");    



                function drawTable() {

                  var jsonData = $.ajax({
                      url: "google_charts_data_preview_ajax.php",
                      data:{source:source},
                      dataType:"json",
                      async: false
                      }).responseText;

                  // Create our data table out of JSON data loaded from server.

                  var data = new google.visualization.DataTable(jsonData);

                  var table = new google.visualization.Table(document.getElementById('g_table'));

                  table.draw(data, {showRowNumber: true});


                }

        });

在所有这一切出现在console.Error上的错误是：

Uncaught ReferenceError: drawTable is not defined

Google告诉我如何使用json创建图表。我应用了他们所说的内容。但我无法弄清楚我做了什么错误？。

https://developers.google.com/chart/interactive/docs/php_example

如何实现这一目标？

由于

Answer 1

这是一个简单的范围问题。您必须将drawTable()函数移出$(document).on("change",..处理程序，进入全局范围。 google.setOnLoadCallback无法看到drawTable，因为它隐藏在处理程序中。

function drawTable() {
     var source=$("select#source option:selected").attr("value");    
     var jsonData = $.ajax({
         url: "google_charts_data_preview_ajax.php",
         data: {
             source: source
         },
         dataType: "json",
         async: false
     }).responseText;

     // Create our data table out of JSON data loaded from server.
     var data = new google.visualization.DataTable(jsonData);
     var table = new google.visualization.Table(document.getElementById('g_table'));
     table.draw(data, {
         showRowNumber: true
     });
 }

和

$(document).on("change","select#source",function(){
   drawTable();
});

证明这实际是问题而且代码在其他方面效果很好 - ＆gt;的 http://jsfiddle.net/411gosq7/

如何用Google Datatable绘制表格使用PHP＆amp; jQuery Ajax Json

1 个答案: