在 Leaflet 控件中插入 amcharts 图表答案

【问题标题】：amcharts chart insertion in Leaflet control在 Leaflet 控件中插入 amcharts 图表
【发布时间】：2014-10-29 13:26:58
【问题描述】：

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

绘图仪 (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 上，一切正常。并检查 firebug 上的 canvas 元素显示了所需的内容，即：

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

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

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

有我的问题要处理这个问题吗：amCharts doesn't display chart for initially-hidden divs)

Safari 的行为与 Chrome 相同。实际上，它只能在 Firefox 中正确显示。为什么？

【问题讨论】：

标签： javascript leaflet amcharts

【解决方案1】：

好吧，我简单把宽高参数放在我自定义的info 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;
}

【讨论】：