Google 图表不会根据新的 Ajax 过滤器重新绘制图表

Question

如何使此代码使用新的 Ajax 调用数据更新 google 图表？当我从下拉列表中提交时，我在回显结果中看到更新的数据，但图表没有更新。好像我把提交代码放错地方了。

<title>Google Chart in PHP and MySQL</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">


  var drawChart;

      $(document).ready(function () {

                $.ajax({
                      url: "datagen2_2.php",
                      dataType: "JSON",
                      success: function (result) {google.charts.load('current', {'packages': ['corechart']});
                      google.charts.setOnLoadCallback(function () {drawChart(result);
                      });
                }
          
          
      });

      $(".submit").click(function() {

                $.ajax({
                      url: "datagen2_2.php",
                      dataType: "JSON",
                      success: function (result) {google.charts.load('current', {'packages': ['corechart']});
                      google.charts.setOnLoadCallback(function () {drawChart(result);
                      });
                    }
                });
       });


  function drawChart(result) {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Gender');
      data.addColumn('number', 'HowMany');

      var dataArray = [];

      $.each(result, function (i, obj) {
            dataArray.push([obj.Gender, parseInt(obj.HowMany)]);
      });

      data.addRows(dataArray);

      var piechart_options = {
            title: 'Gender breakdown',
            width: 470,
            height: 270,
            colors: ['#800080', '#b200ff']
      };

      var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
      piechart.draw(data, piechart_options);
      }
      });




    </script>

  </head>
  <body>
  <center>
      <img src="logo.png" style="width:200px;height:60px;">
  </center>
  <hr style="border: 4px solid blue;" />

      <table class="columns" style="width:120%">
      <tr>
          <td>
          <label>Gender filter</label>
          <?php

          //Connect to our MySQL database using the PDO extension.
          $pdo = new PDO('mysql:host=localhost;dbname=panel', 'root', '');

          //Our select statement. This will retrieve the data that we want.
          $sql = "SELECT DISTINCT Gender FROM employee GROUP BY Gender";

          //Prepare the select statement.
          $stmt = $pdo->prepare($sql);

          //Execute the statement.
          $stmt->execute();

          //Retrieve the rows using fetchAll.
          $Ngender = $stmt->fetchAll();

          ?>



  <!--Start here -->
      <form method="post" action="indexdash2.php">
    
          <select name="filter">
              <option value="" disabled selected hidden>Choose a filter</option>
              <?php foreach($Ngender as $Ngender): ?>
                  <option value="<?= $Ngender['Gender']; ?>"><?= $Ngender['Gender']; ?></option>
              <?php endforeach; ?>
          </select>
          <input type="submit" name="submit" value="Find">
      </form>
          </td>


      </table>
  <hr style="border: 4px solid blue;" />




  <h2>DEMOGRAPHICS</h2>
      <table class="columns">
          <tr>  
              <td>
                  <div id="piechart_div" style="border: 1px solid #ccc"></div>
              </td>
          </tr>
    
      </table>



  </body>
  </html>

任何帮助将不胜感激！我很确定我错过了一些基本的东西，因为我是新手。

Answer 1

首先，google 的 load 方法每次加载页面只需调用一次。
之后，您可以根据需要多次绘制图表。

接下来，google的load方法也会默认等待页面加载
所以我们可以使用 load 代替 jquery 的 ready 方法。

建议先加载google，
然后调用获取数据并绘制图表。

请参阅以下代码片段...

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

  function getData() {
    $.ajax({
      url: "datagen2_2.php",
      dataType: "JSON"
    }).done(function (result) {
      drawChart(result);
    });
  }

  $('.submit').click(getData);
  getData();

  function drawChart(result) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Gender');
    data.addColumn('number', 'HowMany');

    $.each(result, function (i, obj) {
      data.addRow([obj.Gender, parseInt(obj.HowMany)]);
    });

    var piechart_options = {
      title: 'Gender breakdown',
      width: 470,
      height: 270,
      colors: ['#800080', '#b200ff']
    };

    var piechart = new google.visualization.PieChart(document.getElementById('piechart_div'));
    piechart.draw(data, piechart_options);
  }

});

Google 图表不会根据新的 Ajax 过滤器重新绘制图表

Google chart does not redraw the chart based on a new Ajax filter

ajax

charts

google-visualization

redraw