BoxPlotChart 箱线图

箱线图用于展示数据分布的统计图表,自动计算最小值、Q1、中位数、Q3、最大值,支持多系列分组和异常值显示。

代码演示

API

BoxPlotChartProps

属性说明类型默认值版本
title图表标题string--
data扁平化数据数组BoxPlotChartDataItem[]--
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--
showOutliers是否显示异常点booleantrue-
toolbarExtra头部工具条额外按钮React.ReactNode--
renderFilterInToolbar是否将过滤器渲染到工具栏booleanfalse-
statisticChartStatistic组件配置ChartStatisticConfig | ChartStatisticConfig[]--
loading是否显示加载状态booleanfalse-

BoxPlotChartDataItem

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

说明

统计值计算

组件自动从原始数据数组计算以下统计值:

  • 最小值(min): 非异常值中的最小值
  • Q1(第一四分位数): 25% 分位数
  • 中位数(median): 50% 分位数
  • Q3(第三四分位数): 75% 分位数
  • 最大值(max): 非异常值中的最大值
  • 均值(mean): 平均值
  • 异常值(outliers): 超出 1.5 × IQR 范围的值

异常值检测

使用 IQR(四分位距)方法检测异常值:

  • IQR = Q3 - Q1
  • 下界 = Q1 - 1.5 × IQR
  • 上界 = Q3 + 1.5 × IQR
  • 超出上下界的值被标记为异常值

多系列支持

当数据包含 type 字段时,组件自动按类型分组显示多个系列,便于对比不同组别的数据分布。

筛选功能

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