开发预览 更新于 2026-05-10

Histogram 直方图

分箱直方图,每个 bin 一个柱。

基础用法

数据通过 props 传入,纯 SVG 渲染,无第三方图表库依赖。 配色取自 --viz-1..8 token,色盲友好。

0-5050-100100-200200-500500-1k1k-2k2k-5k5k+
<CfHistogram ... />
<CfHistogram ... />

两种典型分布

正态分布 / 长尾分布对比 — 长尾时建议用对数刻度的 bin label。

正态分布
40-6060-8080-100100-120120-140140-160160-180
长尾分布
0-100100-200200-400400-800800-1.6k1.6k+
<CfHistogram :bins="bins" />
<CfHistogram bins={bins} />

API

属性类型默认值说明
binsHistogramBin[]{ label, count }[]
colorIndex0..70
showLabelsbooleantruebin label 显示开关

反馈与讨论

Histogram 直方图 的讨论

0
0 / 600
一键发送
正在加载评论...