Neumorphism UI
数据与反馈@neumorphism-ui/chart

Chart

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

@neumorphism-ui/chart
Registry JSON

预览

每日访问

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

查看精确数据
每日访问
日期访问
09-01140
09-02220
09-03175

安装

安装: chartnpx shadcn@latest add @neumorphism-ui/chart

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Chart import 代码
"use client";
import { Bar, BarChart, XAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/components/ui/chart";

Example

Chart 用法代码
export default function Example() {
  const data = [{ date: "09-01", visits: 140 }, { date: "09-02", visits: 220 }, { date: "09-03", visits: 175 }];
  return <ChartContainer title="每日访问" description="示例数据。请在表格中查看精确值。" tableLabel="查看数据" table={<table><caption>每日访问</caption><thead><tr><th scope="col">日期</th><th scope="col">访问</th></tr></thead><tbody>{data.map(row => <tr key={row.date}><th scope="row">{row.date}</th><td>{row.visits}</td></tr>)}</tbody></table>}>
    <BarChart data={data} accessibilityLayer><XAxis dataKey="date" /><ChartTooltip /><Bar dataKey="visits" name="访问" fill="var(--primary)" isAnimationActive={false} /></BarChart>
  </ChartContainer>;
}

API 参考

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

无障碍

  • 01

    使用accessibilityLayer、线型和标签，并提供原始数据表。

  • 02

    示例禁用动画。自定义系列的动画由应用负责。