Question

对此类似查询的一些答案表明，您只能拨打.load一次。

所以这是我的代码。
它只绘制第一个模态的图形。

当我打开后续模态时，我需要用新信息重绘图形。

google.charts.setOnLoadCallback(load_page_data, true);

function load_page_data(){
  $(function(){
    $('.modal').on('show.bs.modal', function (){
      rid = $(this).prop('id') ;
      console.log(rid);

      $.ajax({
        url: 'https://www.google.com/jsapi?callback',
        cache: true,
        dataType: 'script',
        success: function(){
          google.load('visualization', '1',{
            packages:['corechart'],
            'callback' : function(){

              $.ajax({
                type: "POST",
                url: 'getdata.php',
                data:{'id': rid},
                async: false,
                success: function(data){
                if(data){
                  chart_data = data;
                  drawChart(chart_data, "My Chart", "Data");
                }
                },
              });
            }
          });
        }
      });

      //something end
    });
  });
}


function drawChart(chart_data, chart1_main_title, chart1_vaxis_title){
  var chart1_data = new google.visualization.DataTable(chart_data);
  var chart1_options ={
    title: chart1_main_title,
    vAxis:{
      title: chart1_vaxis_title,
      titleTextStyle:{
        color: 'red'}
    }
  };

  var chart1_chart = new google.visualization.BarChart

  (document.getElementById('chart_div'));
  chart1_chart.draw(chart1_data, chart1_options);
}

Answer 1

load语句只需要每页调用一次

callback第一次开火，
你可以根据需要绘制尽可能多的图表

建议先加载谷歌，然后再加载

如果你某处$(document).ready，则不需要它

您可以依靠Google的回调来了解网页何时准备就绪

建议设置类似以下......

google.charts.load('current', {
  callback: load_page_data,
  packages: ['corechart']
});

function load_page_data(){
  $('.modal').on('show.bs.modal', function () {
      rid = $(this).prop('id') ;
      console.log(rid);
      $.ajax({
          type: "POST",
          url: 'getdata.php',
          data: {'id': rid},
          async: false,
          success: function(data){
              if(data){
                  chart_data = data;
                  drawChart(chart_data, "My Chart", "Data");
              }
          },
      });
  });
}

function drawChart(chart_data, chart1_main_title, chart1_vaxis_title) {
  var chart1_data = new google.visualization.DataTable(chart_data);
  var chart1_options = {
    title: chart1_main_title,
    vAxis: {title: chart1_vaxis_title,  titleTextStyle: {color: 'red'}}
  };

  var chart1_chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart1_chart.draw(chart1_data, chart1_options);
}

注意：你想使用gstatic loader ......

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

不 jsapi

<script src="https://www.google.com/jsapi"></script>

根据release notes ...

通过jsapi加载程序保留的Google Charts版本不再一致更新。从现在开始请使用新的gstatic装载机。

重新绘制每个模式弹出的谷歌图表

1 个答案: