在传单控件中插入amcharts图表

amcharts chart insertion in Leaflet control

本文关键字：插入 amcharts 图表 控件 单控件      更新时间：2023-09-26

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

<>绘图仪（cfhttp://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;
};

<>传单控制（cfhttp://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上的画布元素可以显示所需内容，即：

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

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

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

我的问题有什么要解决的吗；t显示最初隐藏的div的图表）

Safari的行为与Chrome类似。实际上，它只有在firefox中才能正确显示。为什么？

好的，我只需将宽度和高度参数放在自定义的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;
}
相关文章：