Question

我想使用Google Map API创建一个简单的Bargraph。源代码如下。我确定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>

Answer 1

当您点击按钮时，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>

在Google地图API中创建条形图

1 个答案: