Question

我正在编写一个网站，我在地图画布中插入一个图表，就像插入一个图例一样：

＆lt;＆gt;图形绘图仪（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;
};

＆lt;＆gt;传单控件（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;
};

＆LT;＆GT;

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

在Firefox上，一切正常。检查firebug上的canvas元素会显示所需内容，即：

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

在chrome上，400px x 200px的帧被折叠，作为一个空的传单控件，类似地：

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

我的问题是否可以解决这个问题：amCharts doesn't display chart for initially-hidden divs）

Safari表现为Chrome。实际上，它只能用firefox正确显示。为什么？

Answer 1

好的，我只是将width和height参数放在我的自定义信息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;
}

Leaflet控件中的amcharts图表插入

1 个答案: