关于highchart的地图下钻其官网已经有了很详细的示例:
官网链接
注意:这里可以看到县级数据,但是在自己项目中县级数据是收费数据
这里的地图下钻是和其热力图相关联的,但是在改示例中,热力图部分代码被注释,解开即可。
官方代码如下,逐步解析:
设置左上返回上一级,及上钻
Highcharts.setOptions({
lang: {
drillUpText: '< 返回 “{series.name}”'
}
});
// 中国地图数据
var map = null,
geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
$.getJSON(geochina + 'china.json&callback=?', function(mapdata) {
var data = [];
// 随机数据
Highcharts.each(mapdata.features, function(md, index) {
var tmp = {
name: md.properties.name,// 省的名字
value: Math.floor((Math.random() * 100) + 1) // 生成 1 ~ 100 随机值,热力图中随机数据
};
// 设置下钻,当中国地图数据中心含有该参数时可以下钻,可自定义设置哪个区域可下钻
if(md.properties.drilldown) {
tmp.drilldown = md.properties.drilldown;
}
data.push(tmp);
});
map = new Highcharts.Map('container', {
chart: {
events: {
drilldown: function(e) {
this.tooltip.hide();
console.log(e);
// 异步下钻
if (e.point.drilldown) {
var pointName = e.point.properties.fullname;
map.showLoading('下钻中,请稍后...');
// 获取二级行政地区数据并更新图表
$.getJSON(geochina + e.point.drilldown + '.json&callback=?', function(data) {
data = Highcharts.geojson(data);
Highcharts.each(data, function(d) {
if(d.properties.drilldown) {
d.drilldown = d.properties.drilldown;
}
d.value = Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
});
map.hideLoading();
map.addSeriesAsDrilldown(e.point, {
name: e.point.name,
data: data,
dataLabels: {
enabled: true,
format: '{point.name}'
}
});
map.setTitle({
text: pointName
});
});
}
},
drillup: function() {
map.setTitle({
text: '中国'
});
}
}
}
// 下方不太重要,已删除
});
});
想在地图上添加类似市级地图中的名字,如下图
在 series 中添加:
dataLabels: {
enabled: true,
format: '{point.name}'
}
其中‘内蒙古’字位置有偏差,猜测highchart市依据区域中心定位,要更改其位置可以在chart中添加render函数:
render:function(e){
if($(".m-t-centerbox .highcharts-data-labels :contains('内蒙古')").length > 0){
$(".m-t-centerbox .highcharts-data-labels :contains('内蒙古')").eq(0).attr('transform', 'translate(474,178)');
}
}