使用highcharts做地图统计

highcharts 接入地图的坑

lerleelym

812人浏览 · 2022-08-30 14:56:52

lerleelym · 2022-08-30 14:56:52 发布

最近在做统计数据，用到highcharts做统计地图，以及地图的下钻，百度了一些案例，在此做一些总结，方便自己知识储备。

开始：首先需要引入：hightcharts.js,map.js(地图相关)，drilldown.js 下钻,exporting.js

官方推荐使用的地图数据是geojson：https://geojson.cn/data/

这里踩了个坑，做完了，发布到应用服务器，发现无法获取地图数据，跨域问题；因为本地运行localhost，即使跨域也能取到数据，这就明白跨域问题的出现了，好像也无法实现jsonp的方式，但是统计功能已经弄好了，不想再折腾了，然后想从后台取这个json数据就不存在跨域了呀。。。。十分钟后，搞定，然而。。。放上去还是未能搞定，因为到市级要取市下面的数据，竟然返回了没有授权，原来是付费的，看了价格，对小公司来说，这费用可有点贵。然后又想了想，从本地访问没问题，，是否可以把数据先down下来，放到本地。

var map = null,
                geochina = 'https://geojson.cn/data/',
                getGeoJSON = function (code, callback) {
                    $.getJSON("/content/res/sichuan/" + code + ".json", function (geojson) {
                        callback(geojson);
                    }, function (err) { console.log(err); });

                },
                createMap = function (mapdata, pxdata, event) {
                    var xdata = [];

                    Highcharts.each(mapdata.features, function (md, index) {
                        var obj = pxdata.find(function (obj) {
                            var zcode = obj.geocode;
                            zcode = zcode != null && zcode.length >= 6 ? zcode.substring(0, 6) : zcode;

                            return parseInt(zcode) === parseInt(md.properties.code);
                        });
                        if (obj != null) {
                            var item = obj;
                            var zcode = item.geocode;
                            zcode = zcode != null && zcode.length >= 6 ? zcode.substring(0, 6) : zcode;
                            xdata.push({ name: item.jname, value: item.pxnum, code: zcode, hgnum: item.hgnum, yxnum: item.yxnum, bhgnum: item.bhgnum, khhgnum: item.khhgnum, khyxnum: item.khyxnum, khbhgnum: item.khbhgnum, drilldown: md.properties.filename });
                        }
                        // 文字标签偏移
                        if (md.properties.offset) {
                            md.properties['hc-middle-x'] = md.properties.offset[0];
                            md.properties['hc-middle-y'] = md.properties.offset[1];
                        }
                    });
                    if (map == null) {

map = new Highcharts.Map('container', {
chart: {

style: { color: '#fff' },
 events: {
 drilldown: function (e) {
 drilldown(e);
 },
 drillup: function (e) {
 map.setTitle({
 text: e.seriesOptions.name
 });
 drillup(e);
 }
 }
 },
 title: {
 text: '中国四川', style: { color: '#fff' }
 },
 subtitle: {
 useHTML: true,
 text: ''//'地图数据文件路径详见 <a href="https://geojson.cn" target="_blank">GeoJSON.cn</a>'
 },
 colorAxis: { tickPixelInterval: 100 },
 mapView: {
 projection: {
 name: 'WebMercator'
 }
 },
 mapNavigation: {
 enabled: true,
 buttonOptions: {
 verticalAlign: 'bottom'
 }
 },
 plotOptions: {
 map: {
 borderColor: '#555',
 borderWidth: 0.5,
 }
 },
 tooltip: {
 useHTML: true,
 headerFormat: '<table><tr><th colspan="2">{name}</th></tr>',
 pointFormatter: function () {

let str = '' + this.name + ' ' + "参培人数："
 + this.value + " 线上培训 " +
 "优秀：" + Highcharts.numberFormat(this.yxnum, 0) +
 " | 合格：" + Highcharts.numberFormat(this.hgnum, 0) +
 " | 不合格：" + Highcharts.numberFormat(this.bhgnum, 0) +
 ' 考核结果 ' +
 "优秀：" + Highcharts.numberFormat(this.khyxnum, 0) +
 " | 合格：" + Highcharts.numberFormat(this.khhgnum, 0) +
 " | 不合格：" + Highcharts.numberFormat(this.khbhgnum, 0);
 return str;

},
 //footerFormat: '</table>'
 },
 legend: {
 enabled: false
 },
 series: [{
 data: xdata,
 mapData: mapdata,
 joinBy: 'code',
 keys: ['name', 'value', 'code', 'hgnum', 'yxnum', 'bhgnum', 'khhgnum', 'khyxnum', 'khbhgnum'],
 name: jname,
 id:geocode,
 dataLabels: {
 enabled: true,
 format: '{point.name}',//'{point.name}',
 style: {
 fontSize: '10px'
 }
 },
 states: {
 hover: {
 color: '#a4edba'
 }
 }
 }]
 });
 chartOpts.push(map);
 } else {

                        map.hideLoading();
                        var pointName = event == null ? "" : event.point == null ? event.name : event.point.properties.fullname;
                        if (event == null) {
                            map.series[0].setData($.extend(true,[],xdata));

                        } else {
                            map.addSeriesAsDrilldown(event.point, {
                                name: event.point.name,
                                data: xdata,
                                mapData: mapdata,
                                joinBy: 'code',
                                keys: ['name', 'value', 'code', 'hgnum', 'yxnum', 'bhgnum', 'khhgnum', 'khyxnum', 'khbhgnum'],
                                dataLabels: {
                                    style: {
                                        fontSize: '10px'
                                    },
                                    enabled: true,
                                    format: '{point.name}'
                                }
                            });
                        }
                        if (pointName != "") {
                            map.setTitle({
                                text: pointName
                            });
                        }
                    }
                },
                drilldown = function (event) {
                    map.tooltip.hide();
                    // 异步下钻
                    //console.log(event.point);
                    if (event.point.drilldown) {
                        var pointName = event.point.properties.fullname;
                        map.showLoading('下钻中，请稍后...');
                        geocode = event.point.code;//event.point.code
                        loadCityTJ(event.point.drilldown, geocode, event);
                    }
                },
                drillup = function (event) {
                    map.tooltip.hide();
                    //异步上钻
                    //console.log("sid:"+event.seriesOptions.id);
                    //console.log(event);
                    var code = event.seriesOptions.id;
                    if (code) {
                        var pointName = event.seriesOptions.name;
                        map.showLoading("上钻中，请稍后...");
                        loadCityTJ(event.drillup, code, event);
                    }
                };