Dashboard

小时级别

绿色代表稳定，橙色表示延迟，红色表示故障。悬浮可查看日期。

过去 48 小时

1/13 19:05

正常 (95%)

1/13 20:05

正常 (95%)

1/13 21:05

正常 (95%)

1/13 22:05

正常 (95%)

1/13 23:05

正常 (95%)

1/14 00:05

正常 (95%)

1/14 01:05

正常 (95%)

1/14 02:05

正常 (95%)

1/14 03:05

故障 (40%)

1/14 04:05

故障 (40%)

1/14 05:05

正常 (95%)

1/14 06:05

正常 (95%)

1/14 07:05

正常 (95%)

1/14 08:05

正常 (95%)

1/14 09:05

正常 (95%)

1/14 10:05

正常 (95%)

1/14 11:05

正常 (95%)

1/14 12:05

正常 (95%)

1/14 13:05

正常 (95%)

1/14 14:05

正常 (95%)

1/14 15:05

延迟 (70%)

1/14 16:05

正常 (95%)

1/14 17:05

正常 (95%)

1/14 18:05

正常 (95%)

1/14 19:05

正常 (95%)

1/14 20:05

正常 (95%)

1/14 21:05

正常 (95%)

1/14 22:05

正常 (95%)

1/14 23:05

正常 (95%)

1/15 00:05

正常 (95%)

1/15 01:05

正常 (95%)

1/15 02:05

正常 (95%)

1/15 03:05

正常 (95%)

1/15 04:05

正常 (95%)

1/15 05:05

正常 (95%)

1/15 06:05

正常 (95%)

1/15 07:05

正常 (95%)

1/15 08:05

正常 (95%)

1/15 09:05

正常 (95%)

1/15 10:05

正常 (95%)

1/15 11:05

正常 (95%)

1/15 12:05

正常 (95%)

1/15 13:05

正常 (95%)

1/15 14:05

正常 (95%)

1/15 15:05

正常 (95%)

1/15 16:05

正常 (95%)

1/15 17:05

正常 (95%)

1/15 18:05

正常 (95%)

示例代码

const data = [
  { value: 0.95, label: "第 1 小时", date: "1月10日 10:00" },
  { value: 0.4, label: "第 2 小时", date: "1月10日 11:00" },
]

<Tracker data={data} title="过去 48 小时" showTooltip />

天级别

适合展示每日日志或运行情况。

过去 30 天

2025/12/17

故障 (35%)

2025/12/18

正常 (92%)

2025/12/19

正常 (92%)

2025/12/20

正常 (92%)

2025/12/21

正常 (92%)

2025/12/22

正常 (92%)

2025/12/23

正常 (92%)

2025/12/24

延迟 (65%)

2025/12/25

正常 (92%)

2025/12/26

故障 (35%)

2025/12/27

正常 (92%)

2025/12/28

正常 (92%)

2025/12/29

正常 (92%)

2025/12/30

正常 (92%)

2025/12/31

延迟 (65%)

2026/1/1

正常 (92%)

2026/1/2

正常 (92%)

2026/1/3

正常 (92%)

2026/1/4

故障 (35%)

2026/1/5

正常 (92%)

2026/1/6

正常 (92%)

2026/1/7

延迟 (65%)

2026/1/8

正常 (92%)

2026/1/9

正常 (92%)

2026/1/10

正常 (92%)

2026/1/11

正常 (92%)

2026/1/12

正常 (92%)

2026/1/13

故障 (35%)

2026/1/14

延迟 (65%)

2026/1/15

正常 (92%)

示例代码

<Tracker data={dailyStatus} title="过去 30 天" showTooltip />

竖矩形样式

使用竖着的小长方形展示状态。

过去 48 小时

1/13 19:05

正常 (95%)

1/13 20:05

正常 (95%)

1/13 21:05

正常 (95%)

1/13 22:05

正常 (95%)

1/13 23:05

正常 (95%)

1/14 00:05

正常 (95%)

1/14 01:05

正常 (95%)

1/14 02:05

正常 (95%)

1/14 03:05

故障 (40%)

1/14 04:05

故障 (40%)

1/14 05:05

正常 (95%)

1/14 06:05

正常 (95%)

1/14 07:05

正常 (95%)

1/14 08:05

正常 (95%)

1/14 09:05

正常 (95%)

1/14 10:05

正常 (95%)

1/14 11:05

正常 (95%)

1/14 12:05

正常 (95%)

1/14 13:05

正常 (95%)

1/14 14:05

正常 (95%)

1/14 15:05

延迟 (70%)

1/14 16:05

正常 (95%)

1/14 17:05

正常 (95%)

1/14 18:05

正常 (95%)

1/14 19:05

正常 (95%)

1/14 20:05

正常 (95%)

1/14 21:05

正常 (95%)

1/14 22:05

正常 (95%)

1/14 23:05

正常 (95%)

1/15 00:05

正常 (95%)

1/15 01:05

正常 (95%)

1/15 02:05

正常 (95%)

1/15 03:05

正常 (95%)

1/15 04:05

正常 (95%)

1/15 05:05

正常 (95%)

1/15 06:05

正常 (95%)

1/15 07:05

正常 (95%)

1/15 08:05

正常 (95%)

1/15 09:05

正常 (95%)

1/15 10:05

正常 (95%)

1/15 11:05

正常 (95%)

1/15 12:05

正常 (95%)

1/15 13:05

正常 (95%)

1/15 14:05

正常 (95%)

1/15 15:05

正常 (95%)

1/15 16:05

正常 (95%)

1/15 17:05

正常 (95%)

1/15 18:05

正常 (95%)

示例代码

<Tracker 
  data={hourlyStatus} 
  title="过去 48 小时" 
  itemShape="bar" 
  itemSize={24}
/>

状态追踪 / Tracker

状态追踪 / Tracker