amcharts圖表插入單張控制

Question

我編碼一個網站，其中我插入地圖中的畫布的圖表，正如圖例將被插入：

<>的曲線繪圖儀（CF http://www.amcharts.com/tutorials/your-first-chart-with-amcharts/）

function grapher(chartData) { 
    var chart = new AmCharts.AmSerialChart(); 
    [...] 
    chart.addGraph(graph); 
    chart.write('chartdiv'); 
    return chart; 
}; 

<>小葉控制（CF http://leafletjs.com/examples/choropleth.html）

var courbe = L.control({position: 'bottomleft'}); 
courbe.onAdd = function (map) { 
    var div  = L.DomUtil.create('div', 'info legend'); 
    div.id  = "chartdiv" 
    div.style  = "width: 400px; height: 200px;" 
    return div; 
}; 

<>

courbe.addTo(map); 
grapher(json); 

在Firefox上，一切工作正常。並檢查對螢火蟲的canvas元素顯示什麼期望，那就是：

class="width: 400px; height: 200px; overflow: hidden; text-align: left;" 

在Chrome中，400像素由200像素幀倒塌，作爲一個空的傳單控制和類似：

class="overflow: hidden; text-align: left;" 

有我問題處理這個問題：amCharts doesn't display chart for initially-hidden divs）

Safari的行爲與Chrome一樣。實際上，它只能在Firefox中正確顯示。爲什麼？

Answer 1

好吧，我乾脆把寬度和高度參數在我的自定義信息CSS樣式，如下所示：

.info { 
    padding: 6px 8px; 
    font: 12px/14px courier; 
    background: white; 
    background: rgba(255,255,255,0.8); 
    box-shadow: 0 0 15px rgba(0,0,0,0.2); 
    border-radius: 5px; 
+ width: 400px; 
+ height: 200px; 
}