Question

我遇到了Google折线图API的问题。当我重新加载div时，折线图不会再次加载。

这是折线图的代码

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Year');
        data.addColumn('number', 'Sales');

        data.addRows(4);


         <?php 
            //gets line chart data
            echo $join;?>


        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 320, height: 250, title: ''});
  }

</script>

<h3>Sales History</h3>
    <table border="5" style="border-color: #3b6aa8;" >
        <tr>
            <td>
                <div id="chart_div" style="border: 1;border-color: green;"></div>
            </td>
        </tr>
</table>

用于重新加载div的代码

<script type="text/javascript">
$(document).ready(function() {


$('#sliderform').submit(function() {

    bodyContent = $.ajax({
          url: "dashboardreload.php",
          global: false,
          type: "POST",
          data: ({year : $("#yearval").val(), month: $("#monthval").val(),day : $("#dayval").val(),
          year1 : $("#year1val").val(), month1: $("#month1val").val(),day1 : $("#day1val").val()
                    }),
          dataType: "html",
          async:false,
          success: function(msg){
           //alert('test');
          }
       }
    ).responseText;

    $('#dash').html(bodyContent);
    //confirm(bodyContent);
    return false;


    });

});
</script>

Answer 1

所以这可能是问题

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);

即使您正在重新加载此内容，页面仍然会加载这些引用并且可能永远不会在第二次调用drawChart因为谷歌脚本没有加载任何新内容

要解决此问题，您可能希望在加载新内容后自己调用drawChart函数

success: function(msg){
   drawChart();
 }

也许这会有所帮助。 GL

Answer 2

所以我要假设代码

$('#dash').html(bodyContent);

正试图将div重新插入页面并且您从服务器获取新版本

#dash元素在您的代码中不可见，但我是假设它是父标签。

并且此代码正在尝试重新获取页面

bodyContent = $.ajax({
      url: "dashboardreload.php",
      global: false,
      type: "POST",
      data: ({
         year : $("#yearval").val(), month: $("#monthval").val(),day : $("#dayval").val(),
      year1 : $("#year1val").val(), month1: $("#month1val").val(),day1 : $("#day1val").val()
                }),
      dataType: "html",
      async:false,
      success: function(msg){
       //alert('test');
      }
   }
).responseText;

首先在javascript中定义一个像这样的变量

var bodyContent = .....

你将会遇到一些其他具有全局范围的残缺

其次ajax调用是async你有的成功方法是什么当它的rdy

时，它会从服务器给出响应

success: function(bodyContent){
   $('#dash').html(bodyContent);
}

我希望这有帮助

当我重新加载div时，Google折线图没有重新加载

2 个答案: