問(wèn)題描述

我正在嘗試將 Google 折線圖插入獨(dú)立的 Leaflet 彈出窗口.我按照here 的指示在標(biāo)題中有圖表生成代碼，并且然后我將 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);

這只會(huì)創(chuàng)建一個(gè)空的 400x200 彈出窗口.我很確定問(wèn)題的出現(xiàn)是因?yàn)閳D表生成腳本找不到 div 元素，因?yàn)樗€不存在，但我不知道如何解決它.我嘗試在聲明彈出窗口后移動(dòng)腳本，但這并沒(méi)有做任何事情.如何在彈出窗口中顯示圖表?

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?

推薦答案

嘗試構(gòu)建類似于以下代碼片段的代碼...

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

1) 先加載谷歌圖表

2) 然后加載你需要的其他東西

2) then load other stuff you need

3) 然后嘗試打開(kāi)彈出窗口

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

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