HistogramChart 直方图

直方图用于展示数据分布频率,自动使用 Sturges 规则计算分箱数量,支持多系列堆叠和频率显示。

代码演示

API

HistogramChartProps

属性说明类型默认值版本
title图表标题string--
data扁平化数据数组HistogramChartDataItem[]--
width图表宽度(px),移动端自适应为 100%number | string600-
height图表高度(px),移动端最大约 80% 屏宽(上限 400)number | string400-
className自定义类名string--
classNames自定义CSS类名(支持对象格式,为每层DOM设置类名)ChartClassNames--
styles自定义样式对象ChartStyles--
dataTime数据时间string--
theme图表与容器主题;dark 时容器内嵌 Ant Design 暗色算法,工具栏/筛选与画布一致;暗色下图例色块无白边,与浅色视觉区分'dark' | 'light''light'-
color自定义主色,支持 CSS 变量string | string[]--
showLegend是否显示图例booleantrue-
legendPosition图例位置'top' | 'left' | 'bottom' | 'right''bottom'-
showGrid是否显示网格线booleantrue-
xAxisLabelX 轴标签string--
yAxisLabelY 轴标签string--
stacked是否堆叠显示booleantrue-
binCount自定义分箱数量(不设置则自动计算)number--
showFrequency是否显示频率而非计数booleanfalse-
toolbarExtra头部工具条额外按钮React.ReactNode--
renderFilterInToolbar是否将过滤器渲染到工具栏booleanfalse-
statisticChartStatistic组件配置ChartStatisticConfig | ChartStatisticConfig[]--
loading是否显示加载状态booleanfalse-

HistogramChartDataItem

字段说明类型默认值版本
value原始数据值(必填)number--
type数据系列(用于分组显示)string--
category分类(用于筛选)string--
filterLabel二级筛选标签(可选)string--

说明

自动分箱

组件默认使用 Sturges 规则 自动计算分箱数量:

k = ceil(log2(n) + 1)

其中 n 为数据点数量。这是一种适用于正态分布数据的简单规则。

自定义分箱

通过 binCount 属性可以手动指定分箱数量,适用于:

  • 需要固定分箱数量的场景
  • 对分箱精度有特定要求的场景
  • 需要对比不同数据集时保持一致的分箱

频率模式

默认显示计数(每个分箱中的数据点数量),设置 showFrequency={true} 可切换为显示频率(占比),便于:

  • 比较不同样本量的数据分布
  • 查看数据的相对分布而非绝对数量

多系列支持

当数据包含 type 字段时,组件自动按类型分组显示多个系列:

  • stacked={true}(默认):堆叠显示,便于查看总体分布
  • stacked={false}:并排显示,便于对比各组分布

筛选功能

当数据包含 category 字段时,组件自动显示筛选器,支持按分类切换数据视图。