图表图鉴UI 设计提示词库 / 收录号 05 / Heatmap Intensity
返回风格目录

图表图鉴 / 编号 05 / 强度热力

强度热力 / Heat Map

热力编码的原理只有一句话: 色阶即数值。横纵两维放类别, 颜色深浅放强度, 一张图读完「谁在什么时候最忙」。本页用一条地铁线的 10 个站点 × 06:00-20:00 逐小时客流强度 做完整示范: 连续色阶怎么配刻度, 单向渐变与双向发散怎么取舍, 以及官方无障碍要求——永远不要只靠颜色。 与站内自习室热力风格页不同, 这里聚焦编码原理而非视觉风格。

140格

本页矩阵 / 10 站 × 14 时段

10,000格

官方效率上限 / 超出先聚合

6级

冷到热色阶 / 全部带数字刻度

条件性

无障碍风险 / 必须给数值后备

01真实矩阵 / 站点 × 时段客流强度

轨道 2 号线 / 工作日 / 万人次每小时 / 示范仿真数据

直标数值 = 不只靠颜色的第一道防线 / 缩放与重置为键盘后备
站点 / 时段 06070809101112 13141516171819
北苑小区
大学城
花桥
枢纽站
金融港
科技园
会展中心
老城南
滨江东
机场东
客流强度 / 连续色阶 / 万人次每小时
012345
min 刻度 0max 刻度 5
低于 1 1 至 2 2 至 3 3 至 3.8 3.8 至 4.4 4.4 以上

悬停或用键盘聚焦任一格子 / 此处显示精确读值

读图 / 早高峰 07:00-09:00 居住型站点 (北苑小区 / 花桥) 与就业型站点 (金融港 / 科技园) 双双冲顶, 08 时六站超过 3.5; 晚高峰 17:00-19:00 只有就业型回流; 枢纽站全天平坦, 机场东平稳, 滨江东整线偏冷。实测范围 0.2 至 4.7 万。

02色阶取舍 / 单向渐变 vs 双向发散

同一份 ± 偏差数据 / 两种色阶 / 结果完全不同

下面两张迷你矩阵是同一组数据: 四个站点八个两小时班次, 客流相对各自全日均值的偏差百分比。 区别只在色阶。官方 Color Guidance 原文: 渐变用冷 蓝 到 热 红 / 正负数据用发散刻度 / 永远附数字色阶图例。

误用 / 单向渐变画 ± 偏差

把 蓝 到 红 从 -35 一路铺到 +55 / 中点是 +10 不是 0

站点 / 2h 0608101214161820
金融港 -32+46+12-6-18+8+38-18
北苑小区 +44-14-28-32-24-10+2+19
枢纽站 -6+18+12-2-8+6+16-3
老城南 -22-6+14+22+18+26+31-12

刻度 / -35 至 +55 / 零点落进中蓝档

问题 / 零点被染成中蓝, -28 与 +6 只差一档蓝, 方向信息丢失, 读者无法判断高于还是低于均值。

正确 / 双向发散锚定 0

蓝 负 / 灰白 零 / 红 正 / 中点严格对齐基准

站点 / 2h 0608101214161820
金融港 -32+46+12-6-18+8+38-18
北苑小区 +44-14-28-32-24-10+2+19
枢纽站 -6+18+12-2-8+6+16-3
老城南 -22-6+14+22+18+26+31-12

刻度 / -45 至 +55 / 0 锚定灰白中点 / 蓝红双向对称

收益 / 高于还是低于基准一眼可辨, 枢纽站贴近零区也如实呈现; 蓝灰红取自色盲安全的发散配色族。

取舍规则 / 数据只有大小没有方向 (如客流强度本身) 用单向冷到热渐变; 数据围绕基准有正有负 (如相对均值的偏差 / 环比变化) 必须用双向发散, 且中点严格锚定基准值, 别让 0 漂移。 两者的图例都必须带数字刻度, 这是官方 Color Guidance 的硬要求。

03不只靠颜色 / 无障碍三道防线

官方风险等级 / 条件性 / 满足后备才可用

约百分之四的男性读者分不清部分红绿。官方 Accessibility Notes 说得直白: 在格子里印数值或符号, 用纹理和标签叠加色阶, 不要只靠颜色传达信息。落到本页就是三道防线。

色盲安全替代 / 同一矩阵改用单色明度阶梯

只动明度不动色相 / 六档由浅到深对应 0 到 5 / 黑白打印与色觉障碍下排序依旧成立

012345

换算规则 / 冷热阶的六档直接映射到六档明度, 矩阵结构与读数不变; 若必须保留色相对立, 选蓝橙对侧 (如上方发散色), 避开红绿对; 再叠上直标数值, 就是官方要求的多重冗余。

何时别用热力 / 官方原文: 少于 20 格改用条形图 / 用户需要读取精确值时改直标或表格 / 色盲读者且没有后备方案时不要用。 本页冷热阶的明度从浅到深单调递增, 即使色相不可辨, 深浅仍可排序。

04数据表后备 / Grid Data Table

官方 A11y Fallback / 网格数据表 + 强度摘要

站点 × 时段客流强度 / 万人次每小时 / 06:00-20:00
站点 06070809101112 13141516171819 峰值 / 时均值
北苑小区0.63.94.73.11.40.90.80.91.01.31.62.22.81.54.7 / 081.91
大学城0.42.44.23.61.20.70.60.70.81.11.82.63.11.24.2 / 081.74
花桥0.32.84.53.31.10.70.60.70.91.21.52.12.61.14.5 / 081.67
枢纽站1.22.93.73.42.62.42.73.02.92.62.52.93.32.13.7 / 082.73
金融港0.52.64.64.11.61.01.21.61.82.02.73.64.42.34.6 / 082.43
科技园0.42.24.03.71.50.91.11.41.61.82.43.23.92.04.0 / 082.15
会展中心0.20.81.31.11.01.21.82.42.72.31.71.31.20.82.7 / 141.41
老城南0.51.42.11.81.61.92.52.93.12.82.42.11.91.43.1 / 142.03
滨江东0.20.60.90.70.40.30.40.50.60.50.50.70.90.50.9 / 080.55
机场东0.81.72.42.22.01.92.12.32.22.12.02.22.41.82.4 / 082.01

强度摘要 / 全矩阵 140 格, 合计 260.8 万人次, 均值 1.86; 峰值 4.7 出现在北苑小区 08:00-09:00, 谷值 0.2 出现在滨江东 06 时与会展中心 06 时; 早高峰 07:00-09:00 贡献全天约三成客流, 是行车调度的第一窗口。

05选型速查 / 官方数据

来源 / charts.json 收录号 05 / Heatmap Intensity

数据类型
Heatmap / Intensity
首选图型
Heat Map or Choropleth
备选图型
Grid Heat Map / Bubble Heat
数据量阈值
10,000 格内高效 / 超出先聚合 / 日历热力单幅 SVG 至多 365 格
适用场景
二维网格上的强度与密度 / 时段 × 星期类的活动节律
不适用场景
少于 20 格改用条形 / 需要读精确值 / 色盲读者且无后备
色阶指南
冷 蓝 到 热 红 / 正负数据用发散刻度 / 永远附数字色阶图例
无障碍
风险条件性 / 格内印数值或符号 / 纹理与标签叠加 / 不可只靠颜色
无障碍后备
网格数据表 + 强度摘要 / 键盘聚焦显示格值 / 按钮缩放 / 重置复原
库推荐
D3.js / Plotly / ApexCharts
交互级别
Hover + Zoom
关键词
heatmap / heat-map / intensity / density / matrix / calendar / accessible chart / keyboard accessible chart