Question

我使用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

有人能解决这个问题吗？

Answer 1

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

即

之后

recentlyMap.write(chart.chartId);

这一行写下以下内容

recentlyMap.validateData();

recentlyMap.validateSize();

我在普通地图上使用过这种方法。我不确定地图

Answer 2

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

问题与地图的大小有关 - 当地图缩小时，响应式插件会自动尝试隐藏图例的组件，最终，当地图的大小变小时，整个图例将被隐藏amMap的默认响应断点。

在您的配置中，而不是：

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

试试这个：

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

这说：＆＃34;如果地图高于0px高（如果您要设置自己的宽度和高度样式，则应始终如此），请显示图例。＆＃34;。

我不确定当你没有提供rules阵列时，amMaps会在幕后发生什么，但似乎它适用了它自己的规则如果您不自己提供，请为您服务。

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

Ammaps图例仅出现在窗口调整大小，无法查看其呈现时间

2 个答案: