【问题标题】:AmMap addLabel not workingAmMap addLabel 不起作用
【发布时间】:2016-07-27 08:55:54
【问题描述】:

当没有可用数据时,我使用下面的代码来渲染地图。当数据到来时,地图工作正常。我尝试了几种方法来添加标签,但它不起作用。最后两行显示了我到目前为止添加标签的尝试

// build map
AmCharts.ready(function () {
    AmCharts.theme = AmCharts.themes.dark;
    window.map = new AmCharts.AmMap();

    window.map.areasSettings = {
        unlistedAreasColor: "#000000",
        unlistedAreasAlpha: 0.1
    };
    window.map.imagesSettings.balloonText = "<span style='font-size:14px;'><b>[[title]]</b>: [[value]]</span>";

    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        images: []
    }

    // create circle for each country


    // it's better to use circle square to show difference between values, not a radius
    var maxSquare = maxBulletSize * maxBulletSize * 2 * Math.PI;
    var minSquare = minBulletSize * minBulletSize * 2 * Math.PI;

    // create circle for each country
    for (var i = 0; i < mapData.length; i++) {
        var dataItem = mapData[i];
        var value = dataItem.value;
        // calculate size of a bubble
        var square = (value - min) / (max - min) * (maxSquare - minSquare) + minSquare;
        if (square < minSquare) {
            square = minSquare;
        }
        var size = Math.sqrt(square / (Math.PI * 2));
        var id = dataItem.code;

        dataProvider.images.push({
            type: "circle",
            width: size,
            height: size,
            color: "#ff9a00",
            longitude: latlong[id].longitude,
            latitude: latlong[id].latitude,
            title: dataItem.name,
            value: value
        });
    }

    window.map.dataProvider = dataProvider;
    window.map.export = {
        enabled: true
    }
    window.map.projection = "winkel3";
    window.map.write("dash_chart_world");
});

// add label
AmCharts.AmMap.mapdiv.addLabel(0, '50%', 'You don\'t have any sales yet', 'center');

// set opacity of the chart div
AmCharts.AmMap.mapdiv.style.opacity = 0.5;

感谢任何帮助。 谢谢

【问题讨论】:

    标签: jquery amcharts ammap


    【解决方案1】:

    您错过的是,每当图表发生问题时都需要调用该函数。由于您的需求与数据耦合,我们可以为 dataUpdated 添加事件监听器并检查图像数组是否为空:

    map.addListener("dataUpdated", function() {
        if (map.dataProvider.images.length == 0) {
            // add label
            map.addLabel(0, '50%', 'You don\'t have any sales yet', 'center');
    
            // set opacity of the chart div
            map.mapContainer.node.style.opacity = 0.1;
      }
    });
    

    关于我所做的其他更改:

    • 方法addLabel属于AmChart对象而不属于 AmCharts.AmMap.mapdiv。 (这甚至不存在。)
    • 更改保存整个地图的div 的不透明度(可以使用map.div [AmChart.div] 获得)也会改变添加标签的不透明度。如果您只想更改地图本身的不透明度,您可以在 map.mapContainer.node 元素上进行更改。 (这是svg持有地图投影的部分。)

    我准备了一个小的demo,您可以在其中看到它处理动态数据。

    【讨论】:

    • 谢谢@gerric,那太完美了。我已经能够为我的其他折线图和圆环图显示“未找到数据”,但 AmMap 很棘手。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多