Question

我创建了一个包含基本配置的简单地图。标签显示在错误的位置。有什么想法吗？

var map_chart;

function init_map(){
	
    map_chart =  new Highcharts.chart({
		
        chart: {
            type: 'map',
	    renderTo: 'map_container'
        },

        series: [{
            mapData: Highcharts.maps['custom/world'],
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });

}

$( document ).ready(function() {
	
	init_map();

});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

<div id="map_container">
</div>

Answer 1

使用Map collection

创建地图的正确方法

来自highmaps docs

在地图集合引用中，每个地图名称后跟一个示例链接。查看此示例的源代码以开始使用。简而言之，地图的GeoJSON版本加载在页面的脚本标记中。然后将此GeoJSON对象注册到Highcharts.maps对象，并应用于图表设置中的mapData选项。


将地图添加为JavaScript元素：

<script src="http://code.highcharts.com/mapdata/custom/world.js">   您也可以在http://code.highcharts.com/mapdata/1.1/custom/world.js链接到地图的特定版本或颠覆。


将其加载到series.mapData：

mapData：Highcharts.maps [＆＃39; custom / world＆＃39;]，   或者，您可以使用chart.map选项为所有系列设置默认地图：

地图：＆＃39; custom / world＆＃39;


使用地图加入您的数据。默认情况下，Highmaps设置为根据地图集合的hc-keyproperty映射数据，允许您像这样定义数据：

数据：[[＆＃39; us-ny＆＃39;，0]，[＆＃39; us-mi＆＃39;，5]，[＆＃39; us-tx＆＃39;，3] ，[＆＃39; us-ak＆＃39;，5]]   有关其他数据连接选项，请参阅series.joinBy和series.keys选项。

Fiddle演示链接

Answer 2

这似乎是由如何启动highmaps对象引起的。

替换

map_chart = new Highcharts.chart({

与

map_chart = new Highcharts.Map({

解决了问题，JSFiddle

Highmaps标签显示在错误的位置

2 个答案: