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

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 加载程序...

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

不jsapi

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

根据发行说明...

通过 jsapi 加载程序仍然可用的 Google 图表版本不再持续更新。请从现在开始使用新的 gstatic 加载器。