wui
图表

横向条形图 Horizontal Bar Chart

为长分类标签和排名比较保留充足的水平阅读空间。

基础用法

Loading…
pnpm dlx @wui-design/cli@latest add @wui/horizontal-bar-chart
components/charts/horizontal-bar-chart.tsx
"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—图表标题,用于说明正在比较的总量或构成。
heightnumber300图表绘图区高度,单位为像素。
descriptionReactNode—补充单位、时间范围或分母口径的副标题。
actionsReactNode—标题右侧的操作区。
series *ChartSeries[]—参与堆叠的数值序列。
showGridbooleantrue是否显示数值参考网格。
showLegendbooleantrue是否显示图例。
valueFormatterChartValueFormatter—自定义原始数值的显示格式。
labelFormatterChartLabelFormatter—自定义分类标签。
categoryKey *string—分类名称字段。
labelWidthnumber112横向布局为分类标签保留的宽度。
showValuesbooleanfalse是否在足够宽的堆叠段内显示数值。
onValueSelect((datum: ChartDatum, series: ChartSeries, value: number) => void)—点击某个堆叠段时触发。

属性名后的 * 表示必填。