重新绘制谷歌图表为每个模态弹出

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.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装载机.. 。

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

不jsapi

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

根据 release notes

...

谷歌排行榜的版本将不再被持续更新，通过JSAPI装载机仍然可用。请从现在开始使用新的gstatic loader。