問題描述

我正在嘗試將 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);
}

這篇關于將谷歌折線圖放在傳單彈出窗口中的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！