logo

G2

  • 文档
  • 图表介绍
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3
  • 📈 图表分类
  • 马赛克图
  • 堆叠柱状图
  • 分组柱状图
  • 气泡图
  • 色块图
  • 玉珏图
  • 直方图
  • 柱状图
  • 带气泡的地图
  • 雷达图
  • 面积图
  • 箱形图
  • 双向柱状图
  • 环图
  • 热力图
  • 分级统计地图
  • 漏斗图
  • K线图
  • 仪表盘
  • 等高线图
  • 桑基图
  • 子弹图
  • 和弦图

分级统计地图

上一篇
热力图
下一篇
漏斗图

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

分级统计地图是一种在地图分区上使用视觉符号(通常是颜色、阴影或者不同疏密的晕线)来表示一个范围值的分布情况的地图。在整个制图区域的若干个小的区划单元内(行政区划或者其他区划单位),根据各分区的数量(相对)指标进行分级,并用相应色级或不同疏密的晕线,反映各区现象的集中程度或发展水平的分布差别,最常见于选举和人口普查数据的可视化,这些数据以省、市等地理区域为单位。

分级统计地图的简介

此法因常用色级表示,所以也叫色级统计图法。地图上每个分区的数量使用不同的色级表示,较典型的方法有:(1)一个颜色到另一个颜色混合渐变;(2)单一的色调渐变;(3)透明到不透明;(4)明到暗;(5)用一个完整的色谱变化。Choropleth 地图依靠颜色等来表现数据内在的模式,因此选择合适的颜色非常重要,当数据的值域大或者数据的类型多样时,选择合适的颜色映射相当有挑战性。

Choropleth 地图最大的问题在于数据分布和地理区域大小的不对称。通常大量数据集中于人口密集的区域,而人口稀疏的地区却占有大多数的屏幕空间,用大量的屏幕空间来表示小部分数据的做法对空间的利用非常不经济,这种不对称还常常会造成用户对数据的错误理解,不能很好地帮助用户准确得区分和比较地图上各个分区的数据值。

分级统计地图示例

英文名:Choropleth Map

分级统计地图的构成

图表类型分级统计地图
适合的数据一个分类字段,一个连续字段
功能对比分类数据的数值大小
数据与图形的映射一个分类字段映射到地图的地理位置
另一个连续字段映射到颜色
适合的数据条数根据实际地理位置信息,暂无限制

分级统计地图的应用场景

适合的场景

分级统计地图较多的是反映呈面状但属分散分布的现象,如反映人口密度、某农作物播种面积的比、人均收入等。

例子 1: 地理区域数据可视化

下图展示了美国各州的人口分布,通过颜色的深浅反映了人口的主要分布情况,能很明显看出 California、Texas 两大州人口最多。同时也展示了2015年全球人口性别比例分布,其中数值表示的是每100位女性对应的男性数量。可以看出在欧美国家,普遍是女性略多于男性,在前苏联地区这种现象尤为突出,而中东地区却是男多女少。

数据类型地区/国家数值说明
人口数California38802500CA
人口数Texas26956958TX
人口数Florida19893297FL
性别比例Russia86.8每100女性对应的男性数
性别比例China106.3每100女性对应的男性数
性别比例Japan94.7每100女性对应的男性数
............

import { Chart } from '@antv/g2';
import { feature } from 'topojson';
// 加载地图和数据
Promise.all([
fetch('https://assets.antv.antgroup.com/g2/us-10m.json').then((res) =>
res.json(),
),
fetch('https://assets.antv.antgroup.com/g2/unemployment2.json').then((res) =>
res.json(),
),
]).then(([us, unemployment]) => {
const counties = feature(us, us.objects.counties).features;
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.options({
type: 'geoPath',
coordinate: {
type: 'albersUsa' // 使用美国地图的专用投影
},
data: {
value: counties,
transform: [
{
type: 'join',
join: unemployment,
on: ['id', 'id'],
select: ['rate'],
},
],
},
scale: {
color: {
palette: 'ylGnBu', // 使用从黄到蓝的渐变色板
unknown: '#fff', // 未知数据显示为白色
}
},
encode: {
color: 'rate' // 将失业率映射到颜色通道
},
legend: {
color: {
layout: { justifyContent: 'center' } // 调整图例布局
}
},
style: {
stroke: '#666',
strokeWidth: 0.5,
},
tooltip: {
title: (d) => d.properties.name,
items: [
{ field: 'rate', name: '失业率' },
],
},
});
chart.render();
});

说明:

  • 数值字段映射到颜色,表示数据的大小
  • 地理区域名称决定了在其所在的地理位置绘制区域
  • 对于面积较小的区块,因为数值也较小,所以渲染的颜色也浅,导致这些区块在图上很难被看见,这也是分级统计地图的局限性

不适合的场景

  • 展示精确数值:分级统计地图主要用于展示数据的相对大小和分布趋势,不适合需要精确数值读取的场景。
  • 区域面积差异过大:当区域面积差异很大时,面积较大的区域在视觉上会占据主导地位,即使其对应的数值较小,也可能给用户带来误导。此时可以考虑使用气泡地图等其他类型的地图。
  • 数据不具有地理相关性:如果数据与地理位置没有直接关系,使用分级统计地图没有意义。

例子 1: 2008 年美国总统大选结果

选举可视化很容易给用户造成数据分布和地理区域大小不对称的错觉。民主党候选人奥巴马和共和党候选人麦凯恩胜出的州分别用蓝色和红色表示。从图上看,共和党比民主党获得了更多的投票,因为红色的区域所占的面积更大。但是在美国总统大选中,最后的结果是看候选人获得的选举人票数,每个州拥有的选举人票数是不一样的,在一个州获胜的选举人将得到该州的全部选举人票。这个时候推荐使用点描法地图。

State(州)选举人票数奥巴马得票麦凯恩得票
Alabama98134791266546
Arizona101034707638017
Arkansas6422310638017

分级统计地图与其他图表的对比

分级统计地图与气泡地图

  • 分级统计地图:将数值映射到地图区域的颜色上,适合展示连续型数据的分布。
  • 气泡地图:在地图区域上显示一个气泡,气泡的大小表示数值的大小,适合展示离散点数据或在区域面积差异较大时避免误导。

分级统计地图经常会带来误判,面积大的区域可能数值(人口数、选举人票等)比较小。

分级统计地图与点描法地图

  • 点描法地图:主要用于显示某个经纬度上的数据,而分级统计地图用于显示某个区域的统计值。
  • 点描法地图:可以显示大量的数据值,而分级统计地图受显示区域的限制。

相似图表

带气泡的地图
带气泡的地图
比较类
热力图
热力图
分布类
比较类

分类

地图类