Javascript 在传单弹出窗口中反复加载谷歌图表

我按照说明在弹出的传单中插入谷歌图表。它可以工作，但前提是我在打开另一个弹出窗口之前明确关闭一个弹出窗口。如果在关闭第一个弹出窗口之前打开第二个弹出窗口，那么第二个弹出窗口中的图形就会闪烁并消失。如何在不显式关闭每个弹出窗口的情况下正确加载一行中的多个图表？

您需要为每个弹出窗口中的图表创建唯一的ID，以便在引用它们时不会影响其他图表。我在这里通过使用名为

popupId

的变量将每个新图表创建为“curve\u chart1”、“curve\u chart2”等

您没有包含代码，因此我假设它与您链接到的示例非常相似：

// run this before anything else on the page
google.charts.load('current', {
  callback: initPage,
  packages: ['corechart']
});

function initPage() {
  // do normal start up stuff here
  // ...

  var popupId = 1;
  var chartId = "curve_chart" + popupId;

  // open the popup
  var popup = L.popup()
    .setLatLng([51.5, -0.09])
    .setContent('<div id="' + chartId + '" style="width: 400px; height: 200px"></div>')
    .openOn(mymap);

  popupId++; // change the Id for the next popup

  drawChart(chartId);
}

function drawChart(elem) {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  var container = document.getElementById(elem);
  var chart = new google.visualization.LineChart(container);
  chart.draw(data);
}

//在页面上执行任何操作之前运行此操作
google.charts.load（'current'{
回调：initPage，
软件包：['corechart']
});
函数initPage（）{
//在这里做正常的启动工作
// ...
var popupId=1；
var chartId=“曲线图”+popupId；
//打开弹出窗口
var popup=L.popup（）
.setLatLng（[51.5，-0.09]）
.setContent（“”）
.openOn（mymap）；
popupId++；//更改下一个弹出窗口的Id
绘图图（chartId）；
}
功能图（elem）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
data.addRows([
[‘蘑菇’，3]，
[‘洋葱’，1]，
[Olives'，1]，
[‘西葫芦’，1]，
[意大利香肠，2]
]);
var container=document.getElementById（elem）；
var chart=新的google.visualization.LineChart（容器）；
图表绘制（数据）；
}

当我这样做时，新图表在关闭前会立即显示在旧弹出窗口中，然后新弹出窗口为空白。我在上面添加了我的代码。如果你想设置小提琴或弹琴，我会看一看问题是你设置

var chartId=“curve\u chart”+popupId太早（在顶部），所以它永远不会改变值。它需要在打开的弹出代码旁边。以下是更新的Fiddle供您参考：我在浏览器控制台中打开您的Fiddle“error:Container is not defined”（错误：容器未定义）时也看到了一个错误