我正在尝试使用highcharts创建世界地图。地图不可见,但可以看到缩放图标和地图比例。 控制台上没有错误。
[请在此处查看演示]
<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>
}
答案 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>