highcharts世界地图不渲染

时间:2015-10-10 19:30:30

标签: javascript jquery highcharts

我正在尝试使用highcharts创建世界地图。地图不可见,但可以看到缩放图标和地图比例。 控制台上没有错误。

[请在此处查看演示]

http://jsfiddle.net/gh/get/jquery/1.11.0/highslide-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>  
}

1 个答案:

答案 0 :(得分:0)

问题似乎是,您需要从CDN调用highstock和其他库,而不是从GIT调用任何中间版本。

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

See highmap working with pie chart using highstock