将谷歌折线图放在传单弹出窗口中

2022-01-12 00:00:00 leaflet javascript html google-visualization

我正在尝试将 Google 折线图插入独立的 Leaflet 弹出窗口.我按照here 的指示在标题中有图表生成代码，并且然后我将 div 元素放在弹出窗口中.

I'm trying to insert a Google line chart into a standalone Leaflet popup. I have the chart generation code in the header as instructed here, and then I put the div element in the popup.

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

这只会创建一个空的 400x200 弹出窗口.我很确定问题的出现是因为图表生成脚本找不到 div 元素，因为它还不存在，但我不知道如何解决它.我尝试在声明弹出窗口后移动脚本，但这并没有做任何事情.如何在弹出窗口中显示图表?

This just creates an empty 400x200 popup. I'm pretty sure that the problem arises because the chart generation script can't find the div element because it doesn't exist yet, but I don't know how to fix it. I tried moving the script after the declaration of the popup, but that didn't do anything. How can I display the chart in the popup?

推荐答案

尝试构建类似于以下代码片段的代码...

try structuring the code similar to the following snippet...

1) 先加载谷歌图表

2) 然后加载你需要的其他东西

2) then load other stuff you need

3) 然后尝试打开弹出窗口

3) then try opening the popup 

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

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

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

  drawChart();
}

function drawChart() {
  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('curve_chart');
  var chart = new google.visualization.LineChart(container);
  chart.draw(data);
}

相关文章