何时使用
When to Use
Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15
比较离散类目的大小 / 名次是核心洞察 / 类目不超过 15 个。本页样本 8 类，从容落在阈值内。
02 / A主图 / 独立书店类目销量横向条形 / 值降序 / 数值直标
样本 / 拾遗书屋 / 实体门店 / 2026 年 9 月 / 共 8 个类目 2421 册 / 悬停或用 Tab 聚焦任一条形可读取占比 / 小屏可左右滑动
02 / B取向抉择 / 纵向还是横向Column Chart vs Horizontal Bar
纵向柱状
Column Chart / 类目沿横轴展开
柱底共用一条基线，高度对比符合「共同基线」视觉原则，人对高度差的判断最敏锐。
短板：横轴空间紧张。本例被迫把类目名缩成两字，全称「文学小说」放不下。
判定 / 类目名短于四字、类目数 20 以内、版面扁宽时选纵向。
横向条形
Horizontal Bar / 类目沿纵轴展开
标签横排躺在条形左侧，四字全称一行放下，阅读无需歪头，纵向空间按类目数自然生长。
短板：宽度受版面限制，条形过长时数值直标容易被挤出画布，需预留数值栏。
判定 / 类目名长、类目数 20 至 50、版面狭高时选横向。
本页主图取横向：八个四字类目名 + 数值直标 + 占比读数，横向是唯一放得下的取向。两幅迷你图数值同源于主图前五名。
02 / C排序取舍 / 值序还是自然序Sorted by Value vs Natural Order
按值降序
默认排序 / 官方指引 Always sort descending by value
名次一目了然：最长条即冠军，相邻差距沿一条扫描线读完，读者不用来回找「谁在哪儿」。
用于 / 排名、找最大最小、汇报结论。本图鉴主图与数据表默认此序。
自然序
仅当类目自带固有序 / 如拼音 / 时间 / 等级 / 流程
条形参差起伏，排名变难读，但「同一类目逐期对比」时位置固定，读者按位置记忆查找。
用于 / 时间阶段、规模等级、拼音或字母序、流程步骤，且需在图注声明排序依据。
取舍口诀 / 没有固有次序就按值降序，这是官方默认；只有当类目自带次序（时间 / 等级 / 拼音 / 流程）才保留自然序，并在图注写明。两幅图同用前五类目，仅顺序不同。
02 / D数据表后备 / 可排序Accessible Fallback / Hover + Sort
摘要 / 拾遗书屋 2026 年 9 月共售出 2421 册，覆盖 8 个类目；文学小说以 486 册居首（占 20.1%），诗歌散文 152 册最少（占 6.3%），头尾相差 3.2 倍。表头按钮可用 Enter 或 Space 触发排序，方向由 aria-sort 播报。
2421总销量 / 册
302.6均值 / 册
260中位数 / 册
3.2 倍首尾差 / 倍
当前排序 / 销量 / 降序（默认） / 点击表头按钮可切换
排名
占比
4科幻推理29812.3%
5少儿绘本27611.4%
2社科历史41217.0%
7生活旅行1988.2%
8诗歌散文1526.3%
1文学小说48620.1%
6心理自助24410.1%
3艺术设计35514.7%
总计（8 个类目）2421100.1%
占比按四舍五入保留一位小数，合计 100.1% 属进位误差。排名列为销量名次，不随排序方式改变。数据与主图 02-A、迷你样例完全同源。
02 / E官方选型数据引自 charts.json 第 02 条
何时不用
When NOT to Use
Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)
超过 15 类改表格或搜索 / 带时间维度改折线 / 展示占比改华夫图或堆叠条形。
数据量阈值
Data Volume Threshold
<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table
20 类以内可纵向 / 20 至 50 类转横向 / 超过 50 类用分页表格收场。
配色指引
Color Guidance
Each bar: distinct color. Grouped: same hue family. Always sort descending by value
每根条形一色 / 分组用同色系 / 默认按值降序。本页八色均带墨线描边并配文字直标。
无障碍备注
Accessibility Notes / risk:low
Use direct category/value labels and group outlines or patterns; never encode category solely by bar color. Do not rely on color alone.
类目与数值文字直标 / 分组加轮廓或纹理 / 绝不只靠颜色区分类目。数值栏右置保证直标不被挤掉。
后备与键盘
A11y Fallback / Interactive Level: Hover + Sort
Visible sortable data table plus concise comparison summary. Keyboard: focus reveals hover values; focusable headers with Enter/Space sort and aria-sort reports direction.
可见的可排序数据表 + 一句对比摘要 / 键盘聚焦条形读出与悬停一致的数值 / 表头可聚焦，Enter 与 Space 排序，aria-sort 播报方向。
关键词
comparecategoriesbarcomparisonrankingaccessible chartkeyboard accessible chart
备选
Column ChartGrouped Bar