Question

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

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

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

Answer 1

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

1）在其他任何事情之前加载谷歌图表

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

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

// 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);
}

将Google折线图放在Leaflet弹出窗口中

1 个答案: