在没有可用数据的情况下,我使用以下代码来渲染地图。数据出来后,地图运行良好。我尝试了几种添加标签的方法,但都不起作用。最后两行显示了到目前为止我尝试添加标签的内容
// 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;
感谢您的帮助。感谢
您错过的是,每当图表发生问题时,都需要调用函数。由于您的需求与数据相耦合,我们可以为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
中保存地图投影的部分。)
我准备了一个小演示,在那里你可以看到它与动态数据一起工作。