正负变化 <DeltaBars />

以零线为中心的发散条形图：正值向右、强调色，负值向左、墨色。左栏是论点、可选的大字要点和出处。

Template and style descriptions are currently available in Chinese only.

Group: 证据 · 涨了还是跌了
Component: DeltaBars · #delta-bars
Interaction: 条形从零线向两侧生长。

Good for

实验或改动前后的变化：引用率、转化率、耗时
同一处理在不同平台上方向不一致

Avoid when

数值都是正的总量：用 MetricBars
要同时展示前后两个绝对值：用 Dumbbell

Content limits

1	rows 2–6 行：label ≤ 10 字，sub ≤ 14 个字符
2	unit ≤ 4 个字符；scale 是坐标半宽，取比最大绝对值稍大的整数
3	ends 两端说明各 ≤ 6 字，例如“引用减少 / 引用增加”
4	变化不显著时要在标题或 lead 里说明，不要让条形图暗示效果

Fields

Field	Type
`kicker` · required	`string`	标题上方的小节名，2–8 字
`title` · required	`string \| string[]`	页面标题；传数组可手动断行，每项一行
`lead`	`string`	一到两句导语，≤ 60 字
`source`	`string`	事实出处；页面上有任何数据或事实时必填
`hint`	`ReactNode`	页眉中间的操作提示，可用 <kbd>
`rows` · required	`{ label, sub?, value }[]`	value 带正负号
`unit`	`string`	例如 '%'
`scale`	`number`	坐标半宽
`ends`	`[string, string]`	左右两端的说明
`pull`	`{ figure, text }`	左栏要点

Example

<DeltaBars
  kicker="结构化数据"
  title={['加了 schema，', '引用没有提升']}
  rows={[
    { label: 'AskBot', value: 2.2 },
    { label: 'AI 模式', sub: 'Seekr', value: 2.4 },
    { label: 'AI 概览', sub: 'Seekr', value: -4.6 },
  ]}
  unit="%"
  scale={6}
  ends={['引用减少', '引用增加']}
  source="示例知识库 · 结构化数据与 AI 搜索（某工具商）"
/>