图版正文
主图 / 24 小时进站客流折线
以某市轨道交通进站客流(模拟数据)为例:时间轴为 24 小时,双系列对比工作日与周末。折线是本图种主角,其余元素皆为读数与规范服务。
图 1 / 某市轨道 24h 进站客流(万人次 / 模拟数据)
小屏下主图可左右滑动查看,文字与刻度保持原尺寸
悬停图表查看逐时读数 / Tab 键聚焦数据点 / 读数与下方数据表数值一致
图 1 注 / 纵轴为进站客流强度(万人次每小时),横轴为 24 小时制时刻。工作日以 20% 不透明度蓝色面积承托实线,周末以橙色虚线并列,两系列以线型加直接标注双重区分。
- 工作日呈「双峰」通勤形态:早高峰 08:00 达 31.5 万人次,晚高峰 18:00 达 30.2 万人次,午后回落。
- 周末呈「单峰」生活形态:峰值 12:00 达 20.4 万人次,曲线整体平缓,深夜时段略高于工作日。
- 全天谷值 03:00:工作日 0.6 万人次 / 周末 1.2 万人次;两系列最大差 +21.0 万人次,出现在 08:00。
图例 / 工作日 #0080FF 实线 / 周末 #C2410C 虚线 / 面积填充 20% 不透明度 / 标注色 #B3261E
备选形态
Secondary Options / 面积图与平滑面积
官方备选为 Area Chart 与 Smooth Area。两者共享折线的时间轴骨架,小样使用与主图相同的口径(工作日系列,每 2 小时取样)。
备选 A
面积图
Area Chart
何时换用 / 单系列且需要强调「量级水平」而非精确读数时,在折线下加入 20% 不透明度填充,视觉份量更足;多系列叠加填充会互相遮挡,仍应回到纯折线。
备选 B
平滑面积
Smooth Area
何时换用 / 面向宏观趋势叙事、用于汇报氛围图时,样条拟合让形态更柔和;平滑会轻微偏离实测锚点,精确读数场景请保持逐点折线。
数据后备
表 1 / 逐小时进站客流数据
官方无障碍后备要求「可见数据表 + 简明趋势摘要」:本表与图 1 曲线完全同口径,供读屏、放大与打印场景使用,数值单位均为万人次。
趋势摘要 / 工作日客流为双峰通勤型(08:00 峰 31.5 万人次、18:00 峰 30.2 万人次),周末为单峰生活型(12:00 峰 20.4 万人次);全天谷值 03:00(工作日 0.6 / 周末 1.2 万人次);两系列最大差 +21.0 万人次出现在早高峰 08:00,深夜 00:00 至 03:00 周末反而略高。
图注规范
选型要点 / 何时用与何时不用
以下要点逐条对应官方选型数据(charts.json No.1),是本图版的「图注」语言:判断条件写死,不留解释空间。
01
何时使用
数据具有时间轴,且用户需要观察连续时段内的升降走势或变化速率时,折线是第一选择。本页主图即用其呈现 24 小时客流的双峰节奏。
02
何时不用
数据点少于 4 个:改用统计卡;系列超过 6 条:视觉噪声压过信号;没有时间维度:改用柱状比较。三者任一命中即放弃折线。
03
数据量阈值
少于 1000 点用 SVG(本页即手写 SVG);达到 1000 点改 Canvas 并降采样;超过 10000 点先聚合到时间区间再绘制。
04
色彩与线型
主色 #0080FF;多系列用区分色叠加区分线型,绝不只靠色相;面积填充统一 20% 不透明度。实线 / 虚线 / 点线
05
无障碍要求
风险等级:低。以实线、虚线、点线加直接标注区分系列;后备为可见数据表(表 1)加简明趋势摘要;键盘:Tab 聚焦数据点即读出数值,加号减号按钮缩放,重置恢复全域。
06
交互与实现
交互级别:Hover + Zoom(本页已实现悬停十字线与放大 / 缩小 / 重置)。库推荐:Chart.js / Recharts / ApexCharts;本页为无依赖手写 SVG 样张。