将Google图表附在弹出的传单上

Question

我试着在传单中的一个图层的弹出式上附加一个谷歌图表，然后跟着这个instruction。但是，我一直收到这样的错误：

“未定义(承诺)错误:容器未定义”

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

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

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

当我试着设置

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

作为一个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>

我怎么才能解决这个问题？

Answer 1

您的问题是，在打开弹出窗口之前，不会创建HTML chart_div。但是您尝试在未创建的HTML元素上插入图表。

打开弹出窗口后调用drawChart()。

更新您的layer_name函数并将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();
  })
}