Ammaps 图例仅出现在窗口调整大小时，无法看到它何时呈现答案

【问题标题】：Ammaps legend only appears on window resize, Not able to see when it renderedAmmaps 图例仅出现在窗口调整大小时，无法看到它何时呈现
【发布时间】：2016-10-24 13:36:59
【问题描述】：

我已经使用 javascript Amcharts 函数创建了地图。这是我的代码 -

var recentlyLegend = {"id":"recentlyLegendDiv","width":155,"maxColumns":1,"backgroundAlpha":0,"left":0,"top":350,"horizontalGap":10,"switchable":true,"switchType":"x","markerSize":16,"fontSize":10,"data": recentlyWorldLegendData};


$scope.regionByCountryGeoMap = function(chart){
                    var source = worldLevelProcessImages(chart.data, recentlyWorldDataProvider, recentlyLegendColorArray);
                    AmCharts.theme = AmCharts.themes.dark;
                    recentlyMap = new AmCharts.AmMap();
                    recentlyMap.mouseWheelZoomEnabled = true;
                    recentlyMap.zoomControl = {
                        panControlEnabled: false,
                        zoomControlEnabled: true,
                        top: 60,
                        left: 15,
                        gridHeight: 100,
                        iconSize:9,
                        gridBackgroundAlpha: 0
                    };
                    recentlyMap.responsive = {
                        enabled: true
                      };
                    recentlyMap.areasSettings = {color: "#D8DDDF", selectable: true, selectedColor: "#436BFF", outlineColor: "#fff", outlineThickness:
0.5};
                    recentlyMap.imagesSettings.balloonText = "<div align='left' style='font-size:10px;'>[[title]]</div>";
                    recentlyMap.imagesSettings.bringForwardOnHover = false;
                    recentlyMap.legend = recentlyLegend;
                    recentlyMap.hiddenLegendItems = {};
                    recentlyMap.addListener('init', function () {
                        recentlyMap.preventDragOut = true;
                        recentlyMap.legend.switchable = true;
                        recentlyMap.legend.addListener('clickMarker', recentlyHandleLegendClick);
                        recentlyMap.legend.addListener('clickLabel', recentlyHandleLegendClick);
                    });
                    recentlyMap.addListener("rendered", function () {
                        recentlyMap.initialZoomLatitude = recentlyMap.zoomLatitude();
                        recentlyMap.initialZoomLongitude = recentlyMap.zoomLongitude();
                    });
                    recentlyMap.dataProvider = source;
                    recentlyMap.addListener("clickMapObject", handleMapObjectClick);
                    recentlyMap.export = {
                    enabled: true,
                    position: "bottom-right"
                    };
                    recentlyMap.write(chart.chartId);
                }

地图已正确渲染，但图例仅出现在窗口调整大小时，它也没有为图例使用自定义 css

谁能解决这个问题？

【问题讨论】：

您能否以小提琴的形式提供您的问题的minimal, complete, and verifiable example？我尽我所能，但你的代码对我来说很好here。
我的图表没有在页面重新加载时呈现。我正在使用 clink 事件在同一页面上呈现图表。这可能是面临这个问题的原因。
另外，在我的情况下，legends div 不采用自定义 CSS。
如果没有看到重现您问题的演示，就很难解决您的问题。制作一个小提琴/plunker/codepen，以便我们查看并提供建议。

标签： javascript angularjs amcharts

【解决方案1】：

将图表写入html后，尝试调用验证数据和验证大小方法。

即之后

recentlyMap.write(chart.chartId);

这一行写如下

recentlyMap.validateData();

recentlyMap.validateSize();

我在法线贴图上使用过这种方法。我不确定贴图

【讨论】：

【解决方案2】：

我在我自己的 amMap 中解决了这个问题，在浏览器调整大小之前也无法显示图例。解决方案是在我的响应式插件的配置中设置附加值（您也在使用这个插件）。

这个问题与地图的大小有关 - 响应式插件会在地图缩小时自动尝试隐藏图例的组件，最终，随着地图的大小变得小于amMap 的默认响应式断点。

在你的配置中，而不是这个：

"responsive": {
   "enabled": true
},
// ... rest of conf here ...

试试这个：

"responsive": {
    "enabled": true,
    "rules": [
        {
            "minHeight": 0,
            "overrides": {
                "legend": {
                    "enabled": true
                }
            }
        }
    ]
},
// ... rest of conf here ...

这表示：“如果地图的高度高于 0px（如果您设置自己的宽度和高度样式，则应该始终如此），显示图例。”。

当您不提供 rules 数组时，我不确定 amMaps 的幕后情况如何，但如果您自己不提供它们，它似乎适用于您自己的规则。

这是一篇很好的知识库文章，解释了响应式插件： https://www.amcharts.com/kbase/making-charts-responsive/

【讨论】：