Highmaps 标签显示在错误的位置

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 文档

In the map collection reference, each map name is followed by a link to an example. View the source of this example to get started. In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.

Add the map as a JavaScript element:

<script src="http://code.highcharts.com/mapdata/custom/world.js"> You can alternatively link to a specific version or subversion of the map at http://code.highcharts.com/mapdata/1.1/custom/world.js.

Load it in series.mapData:

mapData: Highcharts.maps['custom/world'], Alternatively, you can set the default map for all series with the chart.map option:

map: 'custom/world'

Join your data with the map. By default Highmaps is set up to map your data against the hc-keyproperty of the map collection, allowing you to define your data like this:

data: [['us-ny', 0], ['us-mi', 5], ['us-tx', 3], ['us-ak', 5]] For other data joining options, see the series.joinBy and series.keys options.

Fiddle 演示 link

Answer 2

这似乎是由 highmaps 对象的启动方式引起的。

正在替换

map_chart = new Highcharts.chart({

与

map_chart = new Highcharts.Map({

问题解决，JSFiddle

Highmaps 标签显示在错误的位置

Highmaps labels show in incorrect position

javascript

highcharts

highmaps