图表块：基于诚实坐标轴的可访问图表演示

图表块是一种有边界的数据展示，将图形与其要点、标题、标签、来源、周期以及可访问的数据替代方案结合在一起。当数据的形态比一行精确数值能更快回答问题时，请使用它。

为什么这个元素很重要

图表利用了视觉模式识别。读者可以在逐单元格比较相同数值之前，发现上升、差距、聚类或斜率变化。当模式——而非精确查询——是重点时，这会有所帮助。但它也很危险：裁剪的坐标轴、不均匀的间隔或面积效果，可能使微小差异看起来具有决定性。图表只有在不改变证据的前提下减少认知负担时，才值得使用。

读者心理使书面要点变得至关重要。人们可能更容易记住方向或相对大小，而不是脚注。用文字陈述有边界的结论，必要时包括总体和周期。切勿从相关性中推断因果，或从选定区间中推断总体趋势。

机器可提取性要求将系列名称、标签、数值、单位、来源、周期和结论以文本形式呈现。爬虫或 AI 问答引擎可能无法解释 SVG 路径、画布、截图、悬停状态或颜色图例。因此，该块将视觉元素与有序数据配对，以支持辅助技术、索引、验证和复用。

元素编写规则 具有优先权：选择此元素是因为段落的目的是揭示定量模式，而不是因为图形能装饰页面。如果任务是精确查找或逐项比较，即使图表软件可用，也应使用表格。

何时使用

当读者需要看到四种形态之一时使用图表：有序序列上的变化、一组可管理类别间的差异、观测值的分布，或两个定量变量之间的关系。折线图可以揭示随时间变化的趋势；条形图可以对类别进行排序；直方图可以揭示分布；散点图可以揭示关联性和异常值。数据集必须足够完整、以一致的方式测量，并且与论点相关。

一个简单的测试可以区分图表和表格：如果读者应首先注意到模式，选择图表；如果他们应找到精确数值，选择表格。如果两者都重要，在图表块内包含一个紧凑的表格，使两种输出不会发生漂移。

常见的误用情况包括：

• 两个数值： 写一个句子或小型对比。两个条形很少能更直接地揭示模式。
• 一长串类别： 使用分组表格。三十个条形会造成标签和移动端布局问题。
• 几个标题指标： 当数据是独立亮点而非同一系列时，使用统计条带。
• 过程或时间线： 当标记不编码数量时，使用时间线。
• 从关联中得出因果性声明： 散点图可能显示两个变量一起变动，但不能确定一方导致了另一方。
• 装饰性的"数据故事"： 如果移除图表不会丢失任何结论，则应将其移除。
• 包含长定性标准的对比： 使用对比表格 ，因为支持策略或实施适配等类别无法以条形长度的方式诚实编码。

放置位置

将图表放在引入问题、总体、测量指标和周期的段落之后。将要点直接放在图表之前或之后，然后解释影响和局限性。在研究中，每个图表应与其发现结论相邻。在案例研究中，在展示变化之前先建立基线和干预措施。

将标题、视觉元素、图例、要点、数据替代方案、来源和注释保持在一个 figure 边界内。脚注可以跟在 figure 之后，但广告、注册表单或无关图片不得插入其中。来源应在不打开数据替代方案的情况下可见。

不要将其放在同样突出的图表、重复其数据的独立表格或统计条带、价格表、轮播图或高优先级行动号召旁边。这些配对会形成竞争或造成多重事实来源。用解释性文字将数据展示隔开。

结构

带标注的截图必须标识以下区域：

1. 要点： 一个不借助图片即能陈述模式的句子。
2. 图表标题： 对测量指标、总体和周期的中性描述。
3. 绘图区： 位置、长度或方向编码数值的区域。
4. 坐标轴和刻度： 可见的标签、单位、刻度线、间隔和基线。
5. 系列标签： 尽可能使用直接标签；否则使用不依赖颜色的图例。
6. 注释： 与数据点相关的可选说明，绝不能替代方法论。
7. 数据替代方案： 包含所绘制数值的表格或有序文本。
8. 说明文字和来源： 范围、出处、报告周期以及任何计算说明。

设计示例

每种变体都使用二维标记、可见单位、要点、源数据和可访问替代方案。不存在 3D、象形图、仪表盘或双轴变体，因为装饰和竞争性比例尺会扭曲比较。

折线图： 用于以一致的顺序间隔（通常是时间）测量的数值。缺失观测值必须以间隙而非虚构连接的形式出现。超过四个系列通常需要拆分图表或选择表格。

条形图： 用于跨离散类别进行比较或排序。从零开始设置定量轴，因为条形长度代表量级。当标签较长时，优先使用横向条形图；除非自然顺序有意义，否则按数值排序。

散点图： 用于展示两个定量变量之间的关系。显示各个观测值，命名两个测量指标，披露任何拟合的趋势线，除非研究设计支持，否则避免使用因果性语言。

堆叠条形图： 当总数和构成在少量组别中都重要时使用。保持区段顺序稳定，并将堆叠限制为不超过四个类别。如果读者主要需要比较每个组成部分，则应改用分组条形图或小多图。

参数

下面"来源"指渲染器获取该字段的作者指定的位置，而非图表引用的证据提供者。

show-data=false 仅在等效数据表或完整的逐值文本替代方案已通过程序化方式与 figure 相关联时允许使用。它绝不等于允许发布纯视觉图表。

语法和代码示例

所有三种记法都保留相同的标题、要点、数据集、比例尺、来源、周期和替代文本。图形为示意性展示。

可移植 Markdown 指令

:::chart-block{type=bar y-label="Requests" y-min=0 source="Illustrative editorial dataset" period="2026 Q1–Q4" alt="Requests decrease in every quarter, from 120 in Q1 to 72 in Q4."}
## Illustrative support requests by quarter

Takeaway: Requests decline each quarter, from 120 in Q1 to 72 in Q4.

| Quarter | Requests |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
:::

第一个标题映射到 title；要点和规范数据表映射到正文字段。

Hugo 短代码

Hugo 适配器使用命名参数，并从同一正文字数据集派生视觉元素和表格。此记法指定了预期的映射。

{{< chart-block type="bar" yLabel="Requests" yMin="0" source="Illustrative editorial dataset" period="2026 Q1–Q4" alt="Requests decrease in every quarter, from 120 in Q1 to 72 in Q4." >}}
## Illustrative support requests by quarter

Takeaway: Requests decline each quarter, from 120 in Q1 to 72 in Q4.

| Quarter | Requests |
|---:|---:|
| Q1 | 120 |
| Q2 | 108 |
| Q3 | 84 |
| Q4 | 72 |
{{< /chart-block >}}

WordPress 块

<!-- wp:amicited/chart-block {"type":"bar","title":"Illustrative support requests by quarter","yLabel":"Requests","yMin":0,"source":"Illustrative editorial dataset","period":"2026 Q1–Q4","alt":"Requests decrease in every quarter, from 120 in Q1 to 72 in Q4.","takeaway":"Requests decline each quarter, from 120 in Q1 to 72 in Q4."} -->
<table><thead><tr><th>Quarter</th><th>Requests</th></tr></thead><tbody><tr><th>Q1</th><td>120</td></tr><tr><th>Q2</th><td>108</td></tr><tr><th>Q3</th><td>84</td></tr><tr><th>Q4</th><td>72</td></tr></tbody></table>
<!-- /wp:amicited/chart-block -->

该块可以渲染 SVG 或画布，但保存后和服务端渲染的输出必须保留要点和表格。JavaScript 可用于增强交互，但绝不能提供唯一的标签或数值。

示例

良好示例：视觉和文字讲述相同的有边界故事

要点： 在这组示意性数据中，中位解决时间从 1 月的 18 小时下降到 4 月的 12 小时；该图表并未确定原因。

折线图使用均匀的月度间隔和从 10 到 20 的标注"小时"坐标轴。这种披露的非零折线比例尺是适当的，因为位置（而非条形长度）编码数值。表格展示了每个数据点，且文本未将下降归因于某种干预措施。

不良示例：图形制造紧迫感

一个标题为"上线后解决时间骤降"的条形图，显示相同的 18、17、14 和 12 小时数值，但坐标轴从 11.5 开始。条形看起来几乎缩到消失。1 月被标注为"之前"，4 月为"之后"，中间月份隐藏在悬停后面，既未显示干预日期也未显示来源。红到绿的颜色变化提供了唯一的绩效含义。

此示例失败的原因在于：条形图需要零基线，标题断言因果关系，选择性的标签阻碍了验证。仅悬停可查看的数值排除了键盘、触摸、提取和辅助技术的使用场景。应通过零基线或明确缩放的折线图、每个观测值、来源、周期、数据表和非因果性要点来修复。

Schema 标记和无障碍

Schema.org 没有通用的 Chart 或 Graph 类型。图表仍然是符合条件的页面级实体（如 Article、Report 或 Dataset）中的证据。研究可以描述一个可下载的真实数据集，包含时间覆盖范围、变量、创建者和分发等属性。切勿因为存在图表就虚构数据集、评分、趋势或结果属性。

无障碍要求不仅限于替代文本。为 figure 提供标题和说明文字，为 SVG 提供可访问的名称和描述。画布需要有等效的 DOM 表示。在表格中提供所绘制的数值，使用真实的表头，并将要点保留在图形外部，以便在打印、提取和图片加载失败时仍可使用。

不要仅使用颜色作为系列标识符；添加直接标签、线型、点形状或文本。工具提示必须可通过键盘到达、可关闭且为补充性信息。在 200% 缩放和窄屏宽度下，标注的图表区域应能够重排或滚动，而不会创建页面级滚动。

尊重减少动画偏好，避免动画绘制或自动过渡。如果滤镜改变了数据，应说明状态并在文本中显示当前激活的滤镜。静态图表除非具有真正的控件，否则不应成为键盘焦点目标。

编写规则

这些规则确保图表的视觉权威与其证据成正比：

• 撰写一个 15–35 个词的要点。在可能引起歧义时，指出方向或关系、相关端点、总体和周期。
• 每个系列使用 2–20 个数据点，不超过四个系列。将更密集的工作拆分为小多图、表格或可下载数据集。
• 标题控制在 5–16 个词，标签控制在 1–6 个词。标题用于描述；要点用于得出结论。
• 在整个系列中使用相同的单位和测量定义。如果方法发生变化，断开线条并解释间断点。
• 条形图和堆叠条形图的定量轴从零开始。折线图或散点图的比例尺仅当边界和单位保持可见且该选择不会夸大噪声时，才能使用更窄的范围。
• 对于相等的数值或时间间隔，使用相等的视觉间距。当中间周期缺失时，不要将 2 月和 12 月布局成相邻月份。
• 将缺失值显示为缺失。切勿将其转换为零、在缺失处无声连接或在没有说明方法的情况下进行插值。
• 直接标注预测、估计值、模型值和季节调整值。不要将其样式化为观测数据。
• 避免双轴、3D 效果、透视、象形面积缩放、断裂坐标轴、彩虹调色板以及暗示未测量值的平滑曲线。
• 说明来源、覆盖周期、样本或群体（如相关），以及任何转换（如指数化、归一化或移动平均）。
• 绝不要将行动号召、推荐语、促销徽章、无支持的因果性声明或必要的注意事项仅置于图片内部。
• 图形及其表格来自同一个规范数据集。如果数值发生变化，更新一次并重新生成两个输出。
• 详细的方法论和引用可以在附近的来源块 中继续说明，但图表本身仍需有可见的来源和周期。

使用该图表块的帖子类型

postTypes 前置元数据字段定义了以下经批准的关联关系。列入清单允许在存在真实定量模式时使用图表，但并不要求作者为每个页面都制造图形。

QA 检查清单

• 读者的主要任务是查看模式；仅精确查找更适合使用表格。
• 要点是一个完整的 HTML 文本句子，与所绘制数据一致，且不超出证据范围。
• 标题命名了理解该 figure 所需的测量指标、总体和周期。
• 图表类型与分析任务匹配：序列、类别比较、分布或关系。
• 条形图基线从零开始；所有其他比例尺可见、有合理解释且无欺骗性。
• 间隔、单位、分母、计算和缺失值均得到诚实呈现。
• 系列有直接标注或无需仅依赖颜色即可区分。
• 每个必要的数值无需悬停、JavaScript、动画或图片解读即可获取。
• 数据表或完整的文本替代方案使用真实表头，并与视觉元素完全一致。
• 来源、覆盖周期、群体或样本以及转换信息在图表旁可见。
• 图表及其可访问替代方案来自同一个规范数据集。
• 该块不与重复的数据展示、转化模块或竞争的突出视觉元素相邻放置。
• 图表支持键盘输入、高对比度设置、200% 缩放、窄屏和减少动画。
• 不存在 3D 效果、双轴、断裂坐标轴、象形缩放、无支持的因果性声明或装饰性系列。
• 任何页面级结构化数据均符合条件且与可见证据一致。
• 所选帖子类型在其内容合约中包含图表块。

常见问题

何时应使用图表而非表格？

当首要任务是查看趋势、分布、排名或关系时使用图表。当读者需要在多个字段中进行精确查找时使用表格。当两者都重要时，在图表块内保留一个紧凑的表格作为其可访问数据替代方案。

条形图必须从零开始吗？

是的。条形长度代表从基线开始的量级，因此裁剪基线会改变显现的比例。折线图可以使用非零比例尺，前提是可见范围和单位明确，且更窄的视图在分析上是必要的。

替代文本足以让图表变得可访问吗？

通常不够。替代文本应标识展示内容并总结其主要模式。多值图表还需要附近有一个数据表或等效文本，包含标签、数值、单位、来源和周期。

要点可以仅出现在图表标题中吗？

不可以。标题标识 figure 展示的内容；要点说明读者应注意什么。将要点作为完整句子保留在图形外部，以便在图片无法被感知或提取时仍可使用。

图表块会创建 Schema.org 标记吗？

不会。仅当页面独立符合条件时，才应使用有效的页面级标记（如 Article、Report 或 Dataset）。图表不会创建新的 schema 权限，也不能证明可见证据中不存在的结构化声明是合理的。