将Google线形图放入Leaflet弹出窗口中 [英] put Google line chart in Leaflet popup

问题描述

我正在尝试将Google线形图插入独立的Leaflet弹出窗口。按照此处的说明，我在标题中添加了图表生成代码，并且然后我把div元素放在弹出窗口中。

  var popup = L.popup（）
 .setLatLng（[ ）
 .setContent（'< div id =curve_chartstyle =width：400px; height：200px>< / div>'）
 .openOn（mymap ）; 
  

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

解决方案

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

1）在其他任何地方加载谷歌图表

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

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

  //在页面上的其他任何内容之前运行它
 google.charts.load（'current'，{
 callback：initPage，
 packages：['corechart'] 
}）; 
 
函数initPage（）{
 //在这里正常启动的东西
 // ... 
 
 //打开弹出窗口
 var popup = L.popup（）
 .setLatLng（[51.5，-0.09]）
 .setContent（'< div id =curve_chartstyle =width：400px; height：200px >< / div>'）
 .openOn（mymap）; 
 
 drawChart（）; 
 
 
函数drawChart（）{
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Topping'）; 
 data.addColumn（'number'，'Slices'）; 
 data.addRows（[
 ['Mushrooms'，3]，
 ['Onions'，1]，
 ['Olives'，1]，
 [ '西葫芦'，1]，
 ['Pepperoni'，2] 
]）; 
 
 var container = document.getElementById（'curve_chart'）; 
 var chart = new google.visualization.LineChart（container）; 
 chart.draw（data）; 
} 
  

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

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) load google charts before anything else

2) then load other stuff you need

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

这篇关于将Google线形图放入Leaflet弹出窗口中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！