Прикрепить диаграммы Google к всплывающему листку - PullRequest
Новая
       27

Прикрепить диаграммы Google к всплывающему листку

1 голос
/ 07 февраля 2020

Я пытался прикрепить гугл-чарт к всплывающему слою в Leaflet, следуя этой инструкции . Тем не менее, я получаю эту ошибку:

"Uncaught (в обещании) Ошибка: контейнер не определен"

Вот моя 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>

Как это исправить?

1 Ответ

1 голос
/ 07 февраля 2020

Ваша проблема в том, что ваш 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();
  })
}
...