TimeseriesChart

随时间变化的支出:y 轴标签在右侧,虚线网格,智能时间刻度,十字准线和提示框。

查看源码
Spend per model, last 30 days
时间GPT-5GPT-5 miniClaude Sonnet 4.5Claude 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
import { TimeseriesChart } from "@logicplanes/kaeso-ui";

属性

  • aria-label
    string

    图表的无障碍名称(“按模型统计的请求”)。

  • empty
    boolean

    以空状态(emptyText)替代数据。默认在所有值都为 0 时显示。

  • emptyText
    ReactNode

    空状态显示的文字。默认为 LocaleProvider 语言中的“此时间段内没有数据”。

  • error
    ReactNode

    数据加载失败:图表保持高度,低调地说明情况并提供“重试”。错误以 toast 显示,因此不会显示该值;请在请求失败处用 toast 显示消息。

  • formatTime
    ((t: Date) => string)

    当一个点代表的不只是一个时刻时,为它在提示框、表格和屏幕阅读器中命名:“8月3日当周”“2026年8月”。坐标轴保留其日历刻度。

  • formatValue
    ((v: number) => string) = (v) => formatNumber(v)

    格式化坐标轴和提示框中的值。

  • height
    number = 240

    绘图区高度,单位 px(默认 240)。

  • hideLegend
    boolean

    隐藏图例(单一系列时)。

  • highlight
    number

    像指针悬停一样高亮某个时间点,显示十字准线和提示框:用于联动视图或状态页面。

  • kind
    "stacked" | "line" | "area" = line

    line 绘制折线(默认),area 在每条线下方添加浅色填充,stacked 将面积堆叠。

  • loading
    boolean

    数据正在加载:图表保持高度,并显示一条低调的加载条。

  • onRetry
    (() => void)

    出现 error 后点击“重试”时调用;不传入时不显示该按钮。

  • series
    TimeSeries[]

    系列,每个包含 id、label、由 t(时间)和 v 组成的 points,以及可选的 color。

  • threshold
    { value: number; label: string; }

    危险色的阈值线(预算),虚线。