最后修改时间:2022-12-15 18:35
Highmaps 是继承自 Highcharts 的专门用于地图的图表插件。Highmaps 除了根据值展示地理区域色块外,还支持线段(可以表示公路,河流等)、点(城市,兴趣点等)等其他地理元素。
Highmaps 可以单独使用,也可以作为 Highcharts 的一个插件来使用。
同 Highcharts 使用 方法一样,Highmaps 只需要一个 js 文件即可运行
<script src="https://img.hcharts.cn/highmaps/highmaps.js"></script>
如果是结合 Highcharts 一起使用,则是引入 map.js
即可
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highmaps/modules/map.js"></script>
Highmaps 支持 GeoJSON 标准数据,大多数 GIS 软件支持将常见的 GIS 数据文件(例如 Shapefile、KML)转换成 GeoJSON。
目前有三种方式获取或创建地图数据:
我们提供的地图数据集一般有两种格式,JS 和 JSON 文件,两者内容基本相同,只是加载方式不同,下面以加载中国地图(china.js)数据来说明:
直接以 script 标签的形式加载文件,对应的取地图数据的方法是:
<script src="https://data.jianshukeji.com/geochina/china.js"></script>
<script>
var mapdata = Highcharts.maps['cn/china'];
</script>
其中 Highcharts.maps['cn/china']
可以通过查看文件获得。
由于跨域问题,所以加载 json 时需要用到 jsonp,这里直接用我们提供的接口即可
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(data) {
var mapdata = data;
});
通过 Highcharts.mapChart
构造方法初始化地图实例
var map = Highcharts.mapChart('container', {
// ... 图表配置
});
加载地图数据并初始化图表后,我们可以将业务数据配置在 series.data
中,格式如下:
$.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
var map = Highcharts.mapChart('container', {
series: [{
mapData: mapdata,
data: [{
name: '北京',
value: 2000,
rank: 1
},{
name: '上海',
value: 1500,
rank: 2
}]
}]
});
});
需要注意的是,设置完数据后,我们还需要指定数据与地图数据的关联属性,即 joinBy
,例如:
series: [{
mapData: mapdata,
data: [{
name: '北京',
value: 2000,
rank: 1
}, {
name: '上海',
value: 1500,
rank: 2
}],
joinBy: 'name'
}]
表示的是 data 里的 name
值与地图数据里的 properties.name
进行关联,并将对应的数据展示在对应的地图区域上,另外 joinBy 可以设置为包含两个值的数组,第一个值表示地图数据的 key,第二个值表示数据里的 key
series: [{
mapData: mapdata,
data: [{
city: '北京',
value: 2000,
rank: 1
}, {
city: '上海',
value: 1500,
rank: 2
}],
joinBy: ['name', 'city']
}]
在线试一试jshare.com.cn
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22