Chart

用于可视化趋势与对比，同时提供可读取精确值的数据表。

预览

每日访问量

用柱状图比较示例访问量，并在表格中提供相同数值。

每日访问

请在原始数据表中查看精确值。

查看精确数据

每日访问
日期	访问
09-01	140
09-02	220
09-03	175

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/chart

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

为 ChartContainer 提供标题、说明与数据表，再加入 Recharts 图表和提示。系列名称与数值不应仅依靠颜色或悬停传达。

"use client";

import { Bar, BarChart, XAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/components/ui/chart";

const data = [{ day: "Mon", visits: 120 }, { day: "Tue", visits: 180 }];

export default function Example() {
  return (
    <ChartContainer title="Daily visits" description="Visits by day." tableLabel="View data"
      table={<table><caption>Daily visits</caption><thead><tr><th scope="col">Day</th><th scope="col">Visits</th></tr></thead><tbody>{data.map(row => <tr key={row.day}><th scope="row">{row.day}</th><td>{row.visits}</td></tr>)}</tbody></table>}>
      <BarChart data={data} accessibilityLayer>
        <XAxis dataKey="day" />
        <ChartTooltip />
        <Bar dataKey="visits" name="Visits" fill="var(--primary)" />
      </BarChart>
    </ChartContainer>
  );
}

API 参考

直接组合Recharts轴和系列。数据标记保持平面和清晰，只在周围面板应用拟态阴影。

组件	属性	类型	默认值	说明
`ChartContainer`	`title / description`必填	`string`	`—`	可读的标题和说明。
`ChartContainer`	`table / tableLabel`必填	`ReactNode / string`	`—`	相同数据源的表格及展开标签。
`ChartContainer`	`empty / emptyLabel`	`boolean / string`	`—`	无记录时显示的状态。
`ChartTooltip`	`props`	`Recharts Tooltip props`	`—`	直接传入Recharts Tooltip选项。

预览

每日访问量

安装

用法

API 参考

无障碍