跳到正文
misoto22 design

图表

BarChart

按长度比较的离散分类。

什么时候用它

分类是一个个桶而不是连续区间。如果横轴是时间、读者关心的是趋势，AreaChart 或 LineChart 读起来更快。

示例

default

Visitors by month
Visitors by month
monthDesktopMobile
Jan18680
Feb305200
Mar237120
Apr273190
May209130
Jun314240

fill variants

Visitors by month — default
Visitors by month — default
Desktop
186
305
237
273
209
314

stacking and orientation

Visitors by channel — default, vertical
Visitors by channel — default, vertical
DesktopMobile
18680
305200
237120
173190

emphasis

Glowing
Glowing
Desktop
186
305
237
273
209
314
Buffer — the last period is still open
Buffer — the last period is still open
Desktop
186
305
237
273
209
314
Hover highlight
Hover highlight
Desktop
186
305
237
273
209
314

interaction

Visitors by month
Visitors by month
DesktopMobile
18680
305200
237120
273190

brush

Visitors by day
Visitors by day
dayDesktop
D190
D2176
D3241
D4270
D5254
D6198
D7115
D8153
D9226
D10266
D11263
D12217
D13140
D14129
D15208
D16259
D17268
D18234
D19164
D20104
D21188
D22248
D23270
D24248
D25187
D26102
D27166
D28235

loading

Visitors by month
Loading

value labels

Visitors by month
Visitors by month
Desktop
1,860
30,500
23,700
27,300
9,200
31,400

sonify

Revenue by month
Revenue by month
monthRevenueRefunds
Jan18,6001,240
Feb30,500980
Mar23,7002,310
Apr27,3001,150
May9,2003,040
Jun31,400870

toolbar

Visitors by month

Arrow keys pan by one point, Page Up and Page Down by a screenful, Home and End jump to the ends. Plus and minus zoom, zero resets. Ctrl and the wheel zoom around the pointer, and dragging across the plot zooms to that span.

Showing Jan 25 to Dec 26, 24 of 24 points

Visitors by month
monthDesktop
Jan 251,200
Feb 251,534
Mar 251,837
Apr 252,077
May 252,235
Jun 252,296
Jul 252,258
Aug 252,131
Sep 251,932
Oct 251,687
Nov 251,428
Dec 251,189
Jan 26999
Feb 26884
Mar 26861
Apr 26937
May 261,108
Jun 261,360
Jul 261,669
Aug 262,005
Sep 262,337
Oct 262,631
Nov 262,861
Dec 263,004

说明

按长度比较的离散分类——用来回答“每一个有多少”。

当横轴是连续的、读者在追一条趋势而不是在比较各个桶时，改用 <AreaChart> 或 <LineChart>。

属性

BarChart props
属性类型默认值说明
children必填ReactNode组合进来的各个部分——坐标轴、网格、tooltip、图例，以及标记本身。
config必填TConfig & ValidateKeys<TData, TConfig>—
data必填TData[]图表要画的数据行。每一条对应一个点、一根柱或一个分类。
title必填string这张图在讲什么，用一句读者能据此行动的话。必填，而且即使不显示出来也会播报给读屏软件。
animationTypeChartRevealType'forward'每个 `<BarChart.Bar>` 继承的生长顺序。
barCategoryGapnumber各分类之间的间距。
barGapnumber同一个分类内部各柱之间的间距。
barRadiusnumberBAR_RADIUS每个 `<BarChart.Bar>` 继承的圆角。
chartPropsComponentProps<typeof RechartsBarChart>通往原始 Recharts 图表元素的逃生口。
classNamestring最后合并到 figure 上，所以调用处可以决定它的尺寸和间距。
defaultSelectedDataKeystring | nullnull首次渲染时点亮的序列。选中会让其他序列变暗。
descriptionReactNode标题下面的一行——单位、时间窗口、需要提醒的地方。
emptyChartEmptyProps | false图表没东西可画时显示什么。 只要 `data` 是空的、而且图表并不处于加载中，它就会顶替绘图区渲染出来——这是任何一个真实仪表盘一周之内就会遇到的状态，也是「空白的一对坐标轴」和「加载失败」根本分不出来的那一个。传 `false` 保留坐标轴，用于那种「空本身就是结论」的图。
hideDataTablebooleanfalse去掉隐藏的表格视图。只有当页面自己已经把数据印出来时，这才是对的。
isLoadingbooleanfalse把标记换成一张动画骨架，并保留已测量的高度，这样数据到位时页面不会跳。
loadingBarsnumber骨架画多少根柱子。
onSelectionChange(selectedDataKey: string | null) => void选中项变化时触发；被清除时传 null。
orientationBarOrientation'vertical'柱子朝哪个方向排。当分类名长到必须在柱子底下斜着放时，用 `horizontal`。
showTitleboolean把标题印在图上方，而不是藏起来。
stackTypeBarStackType'default'多个标记如何组合：并排、堆叠，或归一化到 100%。
xDataKeykeyof TData & string分类轴对应的数据字段。brush 和表格视图都需要它。

类型

TSX
export type BarVariant = 'default' | 'hatched' | 'duotone' | 'duotone-reverse' | 'gradient' | 'stripped'
export type BarStackType = 'default' | 'stacked' | 'percent'
export type BarOrientation = 'vertical' | 'horizontal'

无障碍

  • title 必填；数据行同样会渲染成一份视觉隐藏的表格。
  • 每根柱子都带一块看不见的通高命中区，所以刻度底部那根 3px 的柱子和满高的一样好点。
  • 可点击的图例项是真正的 button 并带 aria-pressed，不是挂了点击事件的 div。
  • 错峰生长动画锚定在图表自身的起始时刻、而不是每根柱子的挂载时刻，所以悬停不会让它重播——减少动态偏好下则整个去掉。

相关组件

AreaChartComposedChartRadialChart