TimeseriesChart
随时间变化的支出:y 轴标签在右侧,虚线网格,智能时间刻度,十字准线和提示框。
| 时间 | GPT-5 | GPT-5 mini | Claude Sonnet 4.5 | Claude Haiku 4.5 |
|---|---|---|---|---|
| 9月13日 | $4.72 | $8.22 | $11.71 | $13.34 |
| 9月14日 | $7.39 | $7.76 | $12.36 | $13.16 |
| 9月15日 | $7.07 | $8.23 | $10.78 | $15.20 |
| 9月16日 | $8.46 | $10.01 | $12.02 | $13.03 |
| 9月17日 | $6.09 | $10.51 | $12.44 | $14.08 |
| 9月18日 | $8.56 | $8.27 | $12.49 | $13.61 |
| 9月19日 | $6.90 | $9.46 | $10.43 | $12.20 |
| 9月20日 | $5.61 | $9.89 | $9.90 | $11.02 |
| 9月21日 | $5.12 | $7.28 | $9.93 | $11.17 |
| 9月22日 | $7.23 | $7.59 | $9.88 | $10.10 |
| 9月23日 | $6.54 | $6.26 | $8.40 | $9.04 |
| 9月24日 | $4.59 | $5.62 | $7.99 | $9.76 |
| 9月25日 | $3.84 | $5.88 | $8.76 | $10.08 |
| 9月26日 | $3.79 | $6.34 | $9.35 | $11.23 |
| 9月27日 | $3.82 | $5.21 | $7.75 | $12.03 |
| 9月28日 | $4.41 | $5.05 | $9.90 | $12.36 |
| 9月29日 | $4.71 | $7.67 | $8.46 | $11.40 |
| 9月30日 | $4.10 | $7.52 | $9.33 | $13.41 |
| 10月1日 | $4.86 | $7.44 | $12.00 | $13.67 |
| 10月2日 | $6.66 | $9.94 | $11.86 | $12.56 |
| 10月3日 | $5.84 | $8.97 | $10.76 | $14.79 |
| 10月4日 | $6.76 | $8.47 | $10.52 | $15.05 |
| 10月5日 | $6.01 | $8.93 | $11.26 | $14.06 |
| 10月6日 | $8.21 | $10.94 | $12.65 | $14.53 |
| 10月7日 | $8.48 | $9.74 | $12.06 | $11.59 |
| 10月8日 | $6.85 | $9.05 | $9.86 | $13.02 |
| 10月9日 | $5.91 | $7.55 | $10.11 | $11.43 |
| 10月10日 | $7.77 | $7.68 | $10.19 | $12.50 |
| 10月11日 | $4.55 | $6.26 | $8.56 | $11.76 |
| 10月12日 | $4.89 | $5.12 | $7.81 | $9.30 |
<div className="w-full">
<TimeseriesChart aria-label="Spend per model, last 30 days" series={series} formatValue={money} />
</div>import { TimeseriesChart } from "@logicplanes/kaeso-ui";属性
aria-labelstring图表的无障碍名称(“按模型统计的请求”)。
emptyboolean以空状态(
emptyText)替代数据。默认在所有值都为 0 时显示。emptyTextReactNode空状态显示的文字。默认为 LocaleProvider 语言中的“此时间段内没有数据”。
errorReactNode数据加载失败:图表保持高度,低调地说明情况并提供“重试”。错误以 toast 显示,因此不会显示该值;请在请求失败处用 toast 显示消息。
formatTime((t: Date) => string)当一个点代表的不只是一个时刻时,为它在提示框、表格和屏幕阅读器中命名:“8月3日当周”“2026年8月”。坐标轴保留其日历刻度。
formatValue((v: number) => string) = (v) => formatNumber(v)格式化坐标轴和提示框中的值。
heightnumber = 240绘图区高度,单位 px(默认 240)。
hideLegendboolean隐藏图例(单一系列时)。
highlightnumber像指针悬停一样高亮某个时间点,显示十字准线和提示框:用于联动视图或状态页面。
kind"stacked" | "line" | "area" = lineline绘制折线(默认),area在每条线下方添加浅色填充,stacked将面积堆叠。loadingboolean数据正在加载:图表保持高度,并显示一条低调的加载条。
onRetry(() => void)出现
error后点击“重试”时调用;不传入时不显示该按钮。seriesTimeSeries[]系列,每个包含
id、label、由t(时间)和v组成的points,以及可选的color。threshold{ value: number; label: string; }危险色的阈值线(预算),虚线。