/*1、
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/map.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/data.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/drilldown.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/highcharts/modules/highmapslibs/cn-china-by-peng8.js"></script>
<script type="text/javascript" src="${contextPath}/static/js/chinamaps.js"></script>
<link href="${contextPath}/static/js/highcharts/modules/highmapslibs/font-awesome.css" rel="stylesheet">
2、jsp中引用:
$(function () {
chinamaps('${data1}','${data2}',true);
});
data1为省的数据,data2为市的,deep是否点击省是否显示市
后台数据格式:
String data1 = "[{\"name\":\"甘肃\",\"value\":100},{\"name\":\"内蒙古\",\"value\":2000}]";
String data2 = "[{\"name\":\"包头市\",\"value\":100},{\"name\":\"赤峰市\",\"value\":2000}]";
3、div:
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
*/
function chinamaps(data1,data2,deep,title){
/* var jsonProvince = $.parseJSON('${data2}');
var jsonCity = $.parseJSON('${data1}');
var deep = true;*/
var jsonProvince = $.parseJSON(data1);
var jsonCity = $.parseJSON(data1);
Highcharts.setOptions({
lang:{
drillUpText:"返回 > {series.name}"
}
});
var data = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']),small = $('#container').width() < 400;
//从后台获取的值赋给各个城市
$.each(data, function (i) {
if(deep){//点击省是否进入到市级
this.drilldown = this.properties['drill-key'];
}
var cname = this.properties['cn-name'];
var value = 0;
$.each(jsonProvince, function (i,obj) {
if(cname == obj.name){
value = obj.value;
return;
}
});
this.value = value;
});
/* function getPoint(e){//点击城市触发的事件
console.log(e.point.name);
} */
//初始化地图
$('#container').highcharts('Map', {
chart : {
events: {
drilldown: function (e) {//点击省时触发的事件
if (!e.seriesOptions) {
var chart = this;
var cname=e.point.properties["cn-name"];
chart.showLoading('<i class="icon-spinner icon-spin icon-3x"></i>');
//动态拼接城市资源文件名
$.getJSON("/static/js/highcharts/modules/highmapslibs/"+ e.point.drilldown+".geo.json", function(json){
data = Highcharts.geojson(json);
//ajax 根据点击省份ID获取该省各个城市的value
$.each(data, function (i) {
var cname = this.properties['name'];
var value = 0;
$.each(jsonCity, function (i,obj) {
if(cname == obj.name){
value = obj.value;
return;
}
});
this.value = value;
/* this.events={};
this.events.click=getPoint;//点击城市触发的事件 */
});
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
events:{
show:function(){
alert(1);
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
});
}
this.setTitle(null, { text: cname });
},
drillup: function () {
this.setTitle(null, { text: '中国' });
}
}
},
tooltip: {
formatter:function(){
var result = this.point.name+":"+this.point.value;
return result;
}
},
credits:{
href:"#",
text:""
},
title : {
text : title
},
subtitle: {
text: '中国',
floating: true,
align: 'right',
y: 50,
style: {
fontSize: '16px'
}
},
legend: small ? {} : {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
colorAxis: {
min: 0,
minColor: '#E6E7E8',
maxColor: '#005645'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
plotOptions: {
map: {
states: {
hover: {
color: '#EEDD66'
}
}
}
},
series : [{
data : data,
name: '中国',
dataLabels: {
enabled: true,
format: '{point.properties.cn-name}'
}
}],
drilldown: {
activeDataLabelStyle: {
color: '#FFFFFF',
textDecoration: 'none',
textShadow: '0 0 3px #000000'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
x: 0,
y: 60
}
}
}
});
}
highmaps实例 中国地图 统计
猜你喜欢
转载自779105100.iteye.com/blog/2293891
今日推荐
周排行