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)');
         }
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • This chapter covers the basic setup for using this librar...
    ngugg阅读 1,063评论 0 1
  • 下面是挑选出的9个 JavaScript 图表库: Chart.js Chartist FlexChart Ech...
    zhangxuepeng阅读 5,000评论 0 5
  • 这次放假我们一家回了奶奶家过元旦。奶奶做了好多好吃的,有肉有雨,还有饺子,我们一家还有奶奶爷爷叔叔婶婶妹妹一起过...
    张炎斌阅读 84评论 0 0
  • 一瞬是永恒吗 满城的花开了 风中尽是馥郁的香 夏天的浓烈 是这般粗犷 好像让你不能 在淡泊的岁月徜徉 忽而一阵云来...
    我的分别心阅读 163评论 0 0
  • 晚上,同事马姐请我看电影,说是之前淘了二张很便宜的票,有效期至本月末。而今日是月末的倒数第二天,再不用就作废了。 ...
    心诚则灵yue阅读 132评论 0 1