BarChart
分组与堆叠柱状图，柱体纤细，顶部 4px 圆角，堆叠段之间留 2px 间隙；排名时使用横向柱状图。
- 输入
- 缓存读取
- 输出
- 推理
| 类别 | 输入 | 缓存读取 | 输出 | 推理 |
|---|---|---|---|---|
| Oct 6 | 84万 | 71.3万 | 56万 | 38.3万 |
| Oct 7 | 126万 | 104.5万 | 80.5万 | 31.5万 |
| Oct 8 | 108万 | 90.3万 | 70万 | 47.3万 |
| Oct 9 | 90万 | 76万 | 59.5万 | 40.5万 |
| Oct 10 | 132万 | 109.3万 | 49万 | 33.8万 |
| Oct 11 | 114万 | 95万 | 73.5万 | 49.5万 |
| Oct 12 | 96万 | 80.8万 | 63万 | 42.8万 |
function Stacked() {
const series = useSeries();
return (
<div className="w-full">
<BarChart aria-label="Tokens by kind per day" categories={days} series={series} layout="stacked" formatValue={formatTokens} />
</div>
);
}import { BarChart } from "@logicplanes/kaeso-ui";属性
aria-labelstring图表的无障碍名称（“按模型统计的请求”）。
axisLabelsstring[]柱体下方较短的名称，每个类别一个（“8月3日”代表“8月3日当周”）；提示框、表格和屏幕阅读器仍使用完整类别。在新的一年开始处标出年份（“8月”“12月”“2026”“2月”），并传入
dates：标签放不下时，坐标轴每隔 n 个保留一个，并保留最新值之前的那个（axisLabelIndexes）。categoriesstring[]沿分类轴排列的名称，每个柱组一个，按顺序排列。它们也作为提示框和数据表的标题。
datesreadonly AxisDate[]每个类别开始的日期，每个类别一个：
Date或 ISO 日期（“2026-01-05”）。坐标轴精简标签时，会根据这些日期保留新一年开始处的标签（12 月之后的月份、1 月的第一周），从而在所有语言中保留相同的标签。emptyboolean以空状态（
emptyText）替代数据。当时间段内没有数据时传入。emptyTextReactNode空状态显示的文字。默认为 LocaleProvider 语言中的“此时间段内没有数据”。
errorReactNode数据加载失败：图表保持高度，低调地说明情况并提供“重试”。错误以 toast 显示，因此不会显示该值；请在请求失败处用 toast 显示消息。
formatValue((v: number) => string) = (v) => formatNumber(v)格式化坐标轴和提示框中的值。
heightnumber = 240绘图区高度，单位 px（默认 240）。
highlightnumber像指针悬停一样高亮某个类别并显示提示框：用于联动视图或状态页面。
layout"horizontal" | "grouped" | "stacked" = groupedgrouped将每个分类的柱并排显示（默认），stacked将其堆叠，horizontal横向绘制柱，用于排名。loadingboolean数据正在加载：图表保持高度，并显示一条低调的加载条。
onRetry(() => void)出现
error后点击“重试”时调用；不传入时不显示该按钮。seriesBarSeries[]柱状图的系列，每个包含
id、label、每个分类一个值以及可选的color。未指定时，颜色按id依系列顺序分配。