master

分支 (1)

管理

管理

master

images
/
index.htm

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highmaps Example</title>

		<style type="text/css">
#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
		</style>
	</head>
	<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../../code/highmaps.js"></script>
<script src="../../code/modules/drilldown.js"></script>
<script src="../../code/modules/exporting.js"></script>


<div id="container" style="min-width: 310px; max-width: 400px"></div>
<script type="text/javascript">

var map = null,
    geochina = 'https://data.jianshukeji.com/jsonp?filename=geochina/';
// Prepare random data
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function (geojson) {

	var data = [];
    // 随机数据
    Highcharts.each(geojson.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);
    });

    // Initiate the chart
    map = Highcharts.mapChart('container', {

        title: {
            text: '中国地图'
        },

        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },

        colorAxis: {
            min: 0,
            minColor: '#fff',
            maxColor: '#2aa227',
            labels:{
                style:{
                    "color":"red","fontWeight":"bold"
                }
            }
        },

		tooltip: {
            useHTML: true,
            headerFormat: '<table><tr><td>{point.name}</td></tr>',
            pointFormat: '<tr><td>全称：</td><td>{point.properties.fullname}</td></tr>' +
            '<tr><td>父级：</td><td>{point.properties.parent}</td></tr>' ,
            footerFormat: '</table>'
        },

        series: [{
            data: data,
            mapData: geojson,
            joinBy: ['name', 0],
            keys: ['name', 'value'],
            name: '中国地图',
            states: {
                hover: {
                    color: '#a4edba'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.properties.postal}'
            }
        }],

		chart: {
            events: {
                drilldown: function(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) {
                                d.value = 0//Math.floor((Math.random() * 100) + 1); // 生成 1 ~ 100 随机值
                            });
                            map.hideLoading();
                            map.addSeriesAsDrilldown(e.point, {
                                name: e.point.name,
                                data: data,
								cursor:  'pointer',
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.name}'
                                },
								events: {
									click: function(e) {
										alert(this.name + ' - ' + e.point.name);
									}
								}
                            });
                            map.setTitle({
                                text: pointName
                            });
                        });
                    }
                },
                drillup: function() {
                    map.setTitle({
                        text: '中国'
                    });
                }
            }
        }
    });
});
		</script>
	</body>
</html>