Highcharts Map

Highcharts Map 支持 GeoJSON 、TopoJSON 创建交互性地图图表（支持多种类型的地图类型），下面是相关的文档及示例。

参考文档

示例代码

<div id="container" style="width: 1000px;height: 800px"></div>
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script>
    //...
</script>

 
function createMap(el, mapdata) {
  
	// 生成随机数据
	let data = (mapdata.features || mapdata.objects.default.geometries).map(f => {
		return {
			name: f.properties.name,
			value: Math.random()
		}
	});
 
	// 创建图表
    return Highcharts.mapChart(el, {
        series: [{
            mapData: mapdata,
            data: data,
            joinBy: 'name',
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                style: {
                    fontSize: '10px'
                }
            }
        }],
        mapView: {
            projection: {
                name: 'WebMercator'
            }
        }
    });
}
 
 
fetch('https://geojson.cn/api/china/china.topo.json')
    .then(response => response.json())
    .then(mapdata => {
        createMap(
            document.querySelector('#container'),
            mapdata
        )
    });

示例

基础例子

钻取例子

Highcharts Map 支持钻取功能 (opens in a new tab)，下面是中国下钻到各省的例子。

路线图