在Leaflet彈出窗口中反覆加載Google圖表

Question

我按照說明here在Leaflet彈出窗口中插入Google圖表。它的工作原理，但只有當我打開另一個之前明確關閉一個彈出窗口。如果我在關閉第一個彈出窗口之前打開第二個彈出窗口，則第二個彈出窗口中的圖形會閃爍並消失。我怎樣才能正確加載一個行中的多個圖表，而不必明確地關閉每個彈出窗口？

Answer 1

您需要爲每個彈出框中的圖表創建唯一的ID，以便在引用它們時不會影響其他圖標。我通過使用名爲popupId的變量創建每個新圖表爲「curve_chart1」，「curve_chart2」等。

您還沒有代碼，所以我假設它看起來就像你掛例如：

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

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

    var popupId = 1; 
    var chartId = "curve_chart" + popupId; 

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

    popupId++; // change the Id for the next popup 

    drawChart(chartId); 
} 

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