图表
横向条形图 Horizontal Bar Chart
为长分类标签和排名比较保留充足的水平阅读空间。
基础用法
Loading…
pnpm dlx @wui-design/cli@latest add @wui/horizontal-bar-chart"use client"
import * as React from "react"
import { StackedBarChart, type StackedBarChartProps } from "./stacked-bar-chart"
export interface HorizontalBarChartProps extends Omit<
StackedBarChartProps,
"layout" | "normalize"
> {}
/** 使用横向空间容纳长分类标签,适合排名与分类比较。 */
function HorizontalBarChart(props: HorizontalBarChartProps) {
return <StackedBarChart layout="horizontal" normalize={false} {...props} />
}
export { HorizontalBarChart }
使用场景
HorizontalBarChart 是 StackedBarChart 的横向薄封装,适合排序后的排名、长产品名称和 5–10 个分类比较。
单指标时只传一个序列,不要为了给每行制造不同颜色而重复分类维度。
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| data * | ChartDatum[] | — | 每行代表一个分类的数据。 |
| title * | ReactNode | — | 图表标题,用于说明正在比较的总量或构成。 |
| height | number | 300 | 图表绘图区高度,单位为像素。 |
| description | ReactNode | — | 补充单位、时间范围或分母口径的副标题。 |
| actions | ReactNode | — | 标题右侧的操作区。 |
| series * | ChartSeries[] | — | 参与堆叠的数值序列。 |
| showGrid | boolean | true | 是否显示数值参考网格。 |
| showLegend | boolean | true | 是否显示图例。 |
| valueFormatter | ChartValueFormatter | — | 自定义原始数值的显示格式。 |
| labelFormatter | ChartLabelFormatter | — | 自定义分类标签。 |
| categoryKey * | string | — | 分类名称字段。 |
| labelWidth | number | 112 | 横向布局为分类标签保留的宽度。 |
| showValues | boolean | false | 是否在足够宽的堆叠段内显示数值。 |
| onValueSelect | ((datum: ChartDatum, series: ChartSeries, value: number) => void) | — | 点击某个堆叠段时触发。 |
属性名后的 * 表示必填。