Javascript 在谷歌地图API中创建条形图_Javascript_Jquery_Json

Javascript 在谷歌地图API中创建条形图

javascript jquery json

Javascript 在谷歌地图API中创建条形图,javascript,jquery,json,Javascript,Jquery,Json,我想用谷歌地图API创建一个简单的条形图。源代码如下所示。我确信data.php运行良好。将显示第一个输入参数的图形。但当我点击按钮时，没有任何输出。我怎样才能解决这个问题 <html> <body id="body"> <div id="content"> <form action ="" method ="POST"> <tr id="tableRow"> <th

我想用谷歌地图API创建一个简单的条形图。源代码如下所示。我确信data.php运行良好。将显示第一个输入参数的图形。但当我点击按钮时，没有任何输出。我怎样才能解决这个问题

<html>
  <body id="body">
    <div id="content">
      <form action ="" method ="POST">
        <tr id="tableRow">
          <th valign="bottom">Select country:</th>
          <td>
            <select name="country" id="myCountry" class="">
              <option value = "AFG">Afganistan</option>
              <option value = "ARE">UAE</option>
              <option value = "GBR">United Kingdom</option>
            </select>
          </td>
          <th valign="bottom">Select parameters:</th>
          <td>
            <select name="indices" id="myIndices" class="">
              <option value= "foodfinal">Vulnerability on food</option>
              <option value= "waterfinal">Vulnerability on water </option>
              <option value= "ecosystemfinal">Vulnerability on ecosystem </option>
            </select>
          </td>
          <td valign="top">
            <input type="button" class="action" onclick="displayGraph();" value="Display Graph"/>
          </td>
        </tr>
      </form>
    </div>
    <script type="text/javascript" src="include/jsapi"></script>
    <script type="text/javascript" src="include/jquery.min.js"></script>
    <script type="text/javascript">
      displayGraph();

      function displayGraph(){
        var country = document.getElementById('myCountry').value;
        var index = document.getElementById('myIndices').value;
        alert(index);

        var content = document.getElementById("content");
        document.getElementById("body").innerHTML = "";
        document.getElementById("body").appendChild(content);

        // 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() {
          var jsonData = $.ajax({
            url: "data.php?&country="+country+"&indices="+index,
            dataType:"json", 
            async: false, 
            success : function(data) {
              alert(data); 
            }
          }).responseText;

          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(jsonData);

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
          chart.draw(data, {width: 1500, height: 700});
        }
      }
    </script>
    <body>
      <!--Div that will hold the pie chart-->
      <div id="chart_div"></div>
    </body>
    <!--Load the AJAX API--> 
  </body>
</html>


选择国家：
阿富汗
阿拉伯联合酋长国
大不列颠联合王国
选择参数：
粮食脆弱性
水上脆弱性
生态系统脆弱性
displayGraph（）；
函数displayGraph（）{
var country=document.getElementById（'myCountry'）。值；
var index=document.getElementById（'MyIndexs'）。值；
警报（索引）；
var content=document.getElementById（“内容”）；
document.getElementById（“body”）.innerHTML=“”；
document.getElementById（“正文”）.appendChild（内容）；
//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=$.ajax({
url:“data.php？&country=“+country+”&index=“+index，
数据类型：“json”，
async:false，
成功：功能（数据）{
警报（数据）；
}
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
绘制图表（数据，{宽度：1500，高度：700}）；
}
}

当您按下按钮时，

displayGraph

功能将第二次执行。因此，我希望得到命令

google.load('visualization', '1', {'packages':['corechart']});

无法执行任何操作，因为包已加载。因此，使用

google.setOnLoadCallback(drawChart);

不会再次执行，因为未再次加载包

要解决这个问题，你可以用这样的方法

<script type="text/javascript">
  // 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(displayGraph);

  function displayGraph(){
    var country = document.getElementById('myCountry').value;
    var index = document.getElementById('myIndices').value;
    alert(index);

    var content = document.getElementById("content");
    document.getElementById("body").innerHTML = "";
    document.getElementById("body").appendChild(content);

    // These two lines are not needed anymore
    //google.load('visualization', '1', {'packages':['corechart']});
    //google.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
        url: "data.php?&country="+country+"&indices="+index,
        dataType:"json", 
        async: false, 
        success : function(data) {
          alert(data); 
        }
      }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 1500, height: 700});
    }

    // Since we removed the on-load callback we need to call drawChart manually
    drawChart();
  }
</script>


//加载可视化API和piechart包。
load（'visualization'，'1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（displayGraph）；
函数displayGraph（）{
var country=document.getElementById（'myCountry'）。值；
var index=document.getElementById（'MyIndexs'）。值；
警报（索引）；
var content=document.getElementById（“内容”）；
document.getElementById（“body”）.innerHTML=“”；
document.getElementById（“正文”）.appendChild（内容）；
//这两条线不再需要了
//load（'visualization'，'1'，{'packages'：['corechart']}）；
//setOnLoadCallback（drawChart）；
函数绘图图（）{
var jsonData=$.ajax({
url:“data.php？&country=“+country+”&index=“+index，
数据类型：“json”，
async:false，
成功：功能（数据）{
警报（数据）；
}
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.ColumnChart（document.getElementById（'chart_div'））；
绘制图表（数据，{宽度：1500，高度：700}）；
}
//因为我们删除了加载回调，所以需要手动调用drawChart
图纸（）；
}

你的意思是说，保持行google.load（'visualization'，'1'，{'packages'：['corechart']}）；setOnLoadCallback（displayGraph）；然后启动函数displaygraph？是的，然后在

displaygraph

中，您需要手动调用

drawChart

。该函数以前是作为加载回调函数调用的，所以现在您需要自己调用它。它是否仍然与在页面加载时显示图表的行为相同，但当您单击按钮时没有发生任何事情？@Hennes。那么，我必须在函数displayGraph中包含drawChart（）？对吗？您的HTML布局似乎有点混乱，两个

body

元素嵌套在一起。