2017-02-25 93 views
-1

我创建了一个包含基本配置的简单地图。标签显示在不正确的位置。任何想法?Highmaps标签显示位置不正确

var map_chart; 
 

 
function init_map(){ 
 
\t 
 
    map_chart = new Highcharts.chart({ 
 
\t \t 
 
     chart: { 
 
      type: 'map', 
 
\t  renderTo: 'map_container' 
 
     }, 
 

 
     series: [{ 
 
      mapData: Highcharts.maps['custom/world'], 
 
      dataLabels: { 
 
       enabled: true, 
 
       format: '{point.name}' 
 
      } 
 
     }] 
 
    }); 
 

 
} 
 

 
$(document).ready(function() { 
 
\t 
 
\t 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>

回答

-1

这似乎是已开始的highmaps对象是如何造成的。

map_chart = new Highcharts.Map({

更换

map_chart = new Highcharts.chart({

解决了这个问题,JSFiddle

-1

对于创建地图的适当的方式使用Map collection

从highmaps文档

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

  1. 添加地图作为一个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 [ '定制/世界'], 或者,可以为所有的默认地图系列与chart.map选项:

    地图:“定制/世界

  • 加入与地图数据。默认情况下,Highmaps设置为将数据映射到地图集合的hc-keyproperty,从而允许您像这样定义数据:
  • data:[['us-ny',0],['' us-tx',3],['us-ak',5]] 有关其他数据连接选项,请参阅series.joinBy和series.keys选项。

    Fiddle演示链接

    +0

    而不是复制和粘贴从highcharts.com能否请您解释一下我的代码哪一部分是不正确的,如何解决? 此外,上面粘贴的三个步骤,都是在我的脚本 – Michele

    +0

    之后,你可以通过小提琴链接看到你做了什么错误。我只是通过文档并做了文章。并感谢下降投票**砰砰: - )** –

    +0

    我也经历了文件,这是预料之前问一个问题。一个答案应该有更多的参考文件和/或链接到小提琴 – Michele