リーフレットのポップアップにGoogleチャートを繰り返し読み込んでいます

Question

リーフレットのポップアップにGoogleの図表を挿入するには、hereの指示に従っています。それは動作しますが、別のポップアップを開く前に明示的に1つのポップアップを閉じる場合に限ります。最初のポップアップを閉じる前に2番目のポップアップを開くと、2番目のポップアップのグラフがちょうど点滅して消えます。明示的に各ポップアップウィンドウを閉じることなく、複数のグラフを一列に正しくロードするにはどうすればよいですか？

Answer 1

各ポップアップのチャートに固有のIDを作成する必要があります。その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); 
}