Leaflet 在传单弹出窗口上附加谷歌图表

我试着在传单中的一个图层的弹出窗口上附加一个谷歌图表，然后是这个。然而，我不断地发现这个错误：

“未捕获（承诺中）错误：未定义容器”

下面是我用来绑定弹出窗口的javascript函数：

function layer_name(feature, layer) {
  //...
  var popupContent = L.popup().setContent('<div id="chart_div" align = "center">1</div>')

  layer.bindPopup(popupContent, {maxHeight: 400});
}

功能层\名称（特征、层）{
//...
var popupContent=L.popup（）.setContent（'1'）
bindPopup（popupContent，{maxHeight:400}）；
}

当我试着设置

<div id="chart_div" align = "center">1</div>

1

作为一个HTML元素，不会引发任何错误

我还将在脚本开头绘制的图表定义如下：

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

  // Load Charts and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Draw the pie chart for follower chart when Charts is loaded.
  google.charts.setOnLoadCallback(drawChart);

  // Callback that draws the bar
  function drawChart() {

        var data = google.visualization.arrayToDataTable([
        ['Title', 'Value'],
        ['A', 317],
        ['B', 148],
        ['C', 67],
        ['D', 27],
        ['E', 23]
        ]);

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

        chart.draw(data);
    }

</script>

//加载图表和corechart包。
load（'current'，{'packages'：['corechart']}）；
//加载图表时，绘制跟随者图表的饼图。
google.charts.setOnLoadCallback（drawChart）；
//绘制条的回调函数
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
['Title'，'Value']，
[A'，317]，
[B'，148]，
[C'，67]，
[D'，27]，
[E'，23]
]);
var chart=new google.visualization.BarChart（document.getElementById（'chart_div'））；
图表绘制（数据）；
}

---

如何解决此问题？

您的问题是，在弹出窗口打开之前，不会创建HTML元素

chart\u div

。但是您尝试在未创建的HTML元素上初始化图表

打开弹出窗口后调用

drawChart（）

更新图层名称功能，并将

openpopup

事件添加到图层。当您打开弹出窗口时，它将被调用

function layer_name(feature, layer) {
  //...
  var popupContent = L.popup().setContent('<div id="chart_div" align="center">1</div>')

  layer.bindPopup(popupContent, {maxHeight: 400});
  layer.on('popupopen',function(e){
    drawChart();
  })
}

功能层\名称（特征、层）{
//...
var popupContent=L.popup（）.setContent（'1'）
bindPopup（popupContent，{maxHeight:400}）；
层上（'popupopen'，函数（e）{
图纸（）；
})
}

谢谢！成功了！但我的新问题是，如果只在弹出窗口打开后调用drawChart（），有时在弹出窗口第一次打开时图表不会出现。有时它确实会在第一次出现。您何时使用

google.charts.load

语句？它也是弹出窗口的一部分吗？或者打开弹出窗口的页面？@JacklynLim您可以尝试先将图表添加到隐藏元素，以便在开始时加载所有内容，当弹出窗口打开时，您可以调用

drawChart（）

或将隐藏元素复制到popup@WhiteHat在主脚本函数中调用

google.charts.load

。它应该在弹出窗口打开之前加载。也不要调用

google.charts.setOnLoadCallback（drawChart）这不是必要的我问过OP，因为他们仍然有问题。你不应该。