- 分組
- 方法 · 数字有多可靠
- 元件
RangeBars·#range-bars- 互動
- 区间从中心向两侧展开。
適合
- 讲抽样误差、置信区间、预测范围
- 说明“样本量要多大才够”
不適合
- 数据没有误差范围:用 MetricBars
- 区间来自你自己的估算却没有标明:在 source 里写清计算方法
內容上限
| 1 | rows 3–6 行:label ≤ 8 个字符,note ≤ 8 个字符 |
| 2 | axis.ticks 3–5 个;focusLabel ≤ 8 字 |
| 3 | example.text ≤ 48 个字符(等宽两行) |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 标题上方的小节名,2–8 字 |
title · 必填 | string | string[] | 页面标题;传数组可手动断行,每项一行 |
lead | string | 一到两句导语,≤ 60 字 |
source | string | 事实出处;页面上有任何数据或事实时必填 |
hint | ReactNode | 页眉中间的操作提示,可用 <kbd> |
rows · 必填 | { label, value, low, high, note? }[] | 点估计与区间 |
axis · 必填 | { from, to, ticks } | 坐标范围与刻度 |
unit | string | 刻度单位 |
focus | number | 高亮行的下标 |
focusLabel | string | 高亮行的标签 |
example | { label, text } | 左栏示例块 |
範例程式碼
<RangeBars
kicker="抽样"
title={['只问几次,', '测到的多是噪声']}
rows={[
{ label: 'N = 5', value: 50, low: 28, high: 72, note: '±22' },
{ label: 'N = 30', value: 50, low: 41, high: 59, note: '±9' },
{ label: 'N = 100', value: 50, low: 45, high: 55, note: '±5' },
]}
axis={{ from: 0, to: 100, ticks: [0, 25, 50, 75, 100] }}
unit="%"
focus={1}
focusLabel="最低要求"
source="标准误按 √(p(1−p)/N) 计算"
/>