图表图鉴 / 二十五图种之 01

趋势折线图

Trend Over Time / Line Chart / 观察连续时段内的升降走势与变化速率

关键词 trend / time-series / line / growth / timeline / progress / accessible chart

图号C-01
最佳图型Line Chart
无障碍风险低
交互级别Hover + Zoom

图版正文

主图 / 24 小时进站客流折线

以某市轨道交通进站客流(模拟数据)为例:时间轴为 24 小时,双系列对比工作日与周末。折线是本图种主角,其余元素皆为读数与规范服务。

图 1 / 某市轨道 24h 进站客流(万人次 / 模拟数据)

悬停读数 / Tab 聚焦数据点 / 左右方向键逐点移动 缩放 1.0x
0 5 10 15 20 25 30 35 00:00 04:00 08:00 12:00 16:00 20:00 23:00 时刻(24 小时制) 进站客流 / 万人次每小时 周末(虚线) 工作日(实线) 早高峰 08:00 / 31.5 万 晚高峰 18:00 / 30.2 万 周末峰 12:00 / 20.4 万 谷值 03:00 / 0.6 万 00:00 工作日 2.1 万人次 01:00 工作日 1.2 万人次 02:00 工作日 0.8 万人次 03:00 工作日 0.6 万人次 04:00 工作日 1.1 万人次 05:00 工作日 4.6 万人次 06:00 工作日 12.8 万人次 07:00 工作日 24.3 万人次 08:00 工作日 31.5 万人次 09:00 工作日 22.7 万人次 10:00 工作日 14.2 万人次 11:00 工作日 12.4 万人次 12:00 工作日 13.8 万人次 13:00 工作日 12.9 万人次 14:00 工作日 11.6 万人次 15:00 工作日 13.2 万人次 16:00 工作日 18.4 万人次 17:00 工作日 27.9 万人次 18:00 工作日 30.2 万人次 19:00 工作日 21.5 万人次 20:00 工作日 14.8 万人次 21:00 工作日 10.3 万人次 22:00 工作日 6.4 万人次 23:00 工作日 3.3 万人次 00:00 周末 2.8 万人次 01:00 周末 2.2 万人次 02:00 周末 1.6 万人次 03:00 周末 1.2 万人次 04:00 周末 0.9 万人次 05:00 周末 1.4 万人次 06:00 周末 3.2 万人次 07:00 周末 6.8 万人次 08:00 周末 10.5 万人次 09:00 周末 13.6 万人次 10:00 周末 16.8 万人次 11:00 周末 19.2 万人次 12:00 周末 20.4 万人次 13:00 周末 18.9 万人次 14:00 周末 17.6 万人次 15:00 周末 16.1 万人次 16:00 周末 17.8 万人次 17:00 周末 19.6 万人次 18:00 周末 18.2 万人次 19:00 周末 14.5 万人次 20:00 周末 11.2 万人次 21:00 周末 8.4 万人次 22:00 周末 5.6 万人次 23:00 周末 3.8 万人次

小屏下主图可左右滑动查看,文字与刻度保持原尺寸

悬停图表查看逐时读数 / 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

早高峰 31.5 0 10 20 30 00 06 12 18 工作日 / 面积 20%

何时换用 / 单系列且需要强调「量级水平」而非精确读数时,在折线下加入 20% 不透明度填充,视觉份量更足;多系列叠加填充会互相遮挡,仍应回到纯折线。

备选 B

平滑面积

Smooth Area

早高峰约 31.5 0 10 20 30 00 06 12 18 工作日 / 样条平滑

何时换用 / 面向宏观趋势叙事、用于汇报氛围图时,样条拟合让形态更柔和;平滑会轻微偏离实测锚点,精确读数场景请保持逐点折线。

数据后备

表 1 / 逐小时进站客流数据

官方无障碍后备要求「可见数据表 + 简明趋势摘要」:本表与图 1 曲线完全同口径,供读屏、放大与打印场景使用,数值单位均为万人次。

时刻 标记 工作日(万) 周末(万) 差值(万)
00:00—2.12.8-0.7
01:00—1.22.2-1.0
02:00—0.81.6-0.8
03:00谷值0.61.2-0.6
04:00—1.10.9+0.2
05:00—4.61.4+3.2
06:00—12.83.2+9.6
07:00—24.36.8+17.5
08:00早高峰31.510.5+21.0
09:00—22.713.6+9.1
10:00—14.216.8-2.6
11:00—12.419.2-6.8
12:00周末峰13.820.4-6.6
13:00—12.918.9-6.0
14:00—11.617.6-6.0
15:00—13.216.1-2.9
16:00—18.417.8+0.6
17:00—27.919.6+8.3
18:00晚高峰30.218.2+12.0
19:00—21.514.5+7.0
20:00—14.811.2+3.6
21:00—10.38.4+1.9
22:00—6.45.6+0.8
23:00—3.33.8-0.5

趋势摘要 / 工作日客流为双峰通勤型(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 样张。