highchart地图下钻

关于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)');
         }
}