Highcharts世界地图未渲染

highcharts world map not rendering

本文关键字:世界地图 Highcharts      更新时间:2023-09-26

我试图使用highcharts创建世界地图。地图是不可见的,但缩放图标和地图比例是可见的。控制台没有错误。

[请点击此处查看演示]

http://jsfiddle.net/gh/get/jquery/1.11.0/hililide-software/highcharts.com/tree/master/samples/mapdata/custom/world-highres2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://github.highcharts.com/highstock.js"></script>
<script src="http://github.highcharts.com/modules/map.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div  id= "container1" style="height:500px;min-width: 310px; max-width: 800px;margin: 0 auto"></div>
<script type="text/javascript">

window.onload = function() {
$.ajax({
    test();
});
    };
function test(){
var UsGeo = [{
       "hc-key": "fo",
       "value": 0
   },
     {
         "hc-key": "um",
         "value": 1
     },
     {
         "hc-key": "us",
         "value": 2
     },
     {
         "hc-key": "jp",
         "value": 3
     }];
 $('#container1').highcharts('Map', {
       title: {
           text: 'Highmaps basic demo'
       },
       subtitle: {
           text: 'Source map: <a href="http://code.highcharts.com/mapdata/custom/world-highres2.js">World, Miller projection, very high resolution</a>'
       },
       mapNavigation: {
           enabled: true,
           buttonOptions: {
               verticalAlign: 'bottom'
           }
       },
       colorAxis: {
           min: 0
       },
       series: [{
           data: UsGeo,
           mapData: Highcharts.maps['custom/world-highres2'],
           joinBy: 'hc-key',
           name: 'Random data',
           states: {
               hover: {
                   color: '#BADA55'
               }
           },
           dataLabels: {
               enabled: true,
               format: '{point.name}'
           }
       }]
   });
   });
</script>  
}

问题似乎是,你需要从CDN调用hilitock和其他库,而不是从GIT调用任何中间构建。

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>

参见highmap使用hilitock制作饼状图