图表
精美的图表。使用 Recharts 构建。复制粘贴到您的应用程序中。
注意: 如果您正在将图表与 React 19 或 Next.js 15 一起使用,请参阅此处的说明。
介绍 图表。您可以复制粘贴到您的应用程序中的图表组件集合。
图表设计为开箱即用,外观精美。它们与其他组件配合良好,并且可以完全自定义以适应您的项目。
组件
我们在底层使用 Recharts。
我们在设计 chart
组件时考虑了组合。您可以使用 Recharts 组件构建图表,并且仅在需要时引入自定义组件,例如 ChartTooltip
。
import { Bar, BarChart } from "recharts"
import { ChartContainer, ChartTooltipContent } from "@/components/ui/charts"
export function MyChart() {
return (
<ChartContainer>
<BarChart data={data}>
<Bar dataKey="value" />
<ChartTooltip content={<ChartTooltipContent />} />
</BarChart>
</ChartContainer>
)
}
我们不包装 Recharts。这意味着您不会被锁定在抽象中。当新的 Recharts 版本发布时,您可以按照官方升级路径升级您的图表。
组件是您的.
安装
注意: 如果您正在将图表与 React 19 或 Next.js 15 一起使用,请参阅此处的说明。
运行以下命令来安装 chart.tsx
pnpm dlx shadcn@latest add chart
将以下颜色添加到您的 CSS 文件
@layer base {
:root {
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
--chart-3: 197 37% 24%;
--chart-4: 43 74% 66%;
--chart-5: 27 87% 67%;
}
.dark {
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
--chart-3: 30 80% 55%;
--chart-4: 280 65% 60%;
--chart-5: 340 75% 55%;
}
}
您的第一个图表
让我们构建您的第一个图表。我们将构建一个条形图,添加网格、轴、工具提示和图例。
首先定义您的数据
以下数据表示每个月的桌面和移动用户数量。
注意: 您的数据可以是任何形状。您不限于以下数据的形状。使用 dataKey
属性将您的数据映射到图表。
const chartData = [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
]
定义您的图表配置
图表配置保存图表的配置。您可以在此处放置人类可读的字符串,例如标签、图标和用于主题化的颜色标记。
import { type ChartConfig } from "@/components/ui/chart"
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
mobile: {
label: "Mobile",
color: "#60a5fa",
},
} satisfies ChartConfig
构建您的图表
您现在可以使用 Recharts 组件构建您的图表。
重要提示: 请记住在 ChartContainer
组件上设置 min-h-[VALUE]
。这是图表响应式所必需的。
"use client"
import { Bar, BarChart } from "recharts"
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
const chartData = [
{ month: "January", desktop: 186, mobile: 80 },
{ month: "February", desktop: 305, mobile: 200 },
{ month: "March", desktop: 237, mobile: 120 },
{ month: "April", desktop: 73, mobile: 190 },
{ month: "May", desktop: 209, mobile: 130 },
{ month: "June", desktop: 214, mobile: 140 },
]
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
mobile: {
label: "Mobile",
color: "#60a5fa",
},
} satisfies ChartConfig
export function Component() {
return (
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
)
}
添加网格
让我们向图表添加一个网格。
导入 CartesianGrid
组件。
import { Bar, BarChart, CartesianGrid } from "recharts"
将 CartesianGrid
组件添加到您的图表。
<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
添加轴
要向图表添加 x 轴,我们将使用 XAxis
组件。
导入 XAxis
组件。
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
将 XAxis
组件添加到您的图表。
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
添加工具提示
到目前为止,我们只使用了 Recharts 中的组件。由于 chart
组件中的一些自定义,它们开箱即用,外观精美。
要添加工具提示,我们将使用来自 chart
的自定义 ChartTooltip
和 ChartTooltipContent
组件。
导入 ChartTooltip
和 ChartTooltipContent
组件。
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
将组件添加到您的图表。
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
悬停以查看工具提示。很简单,对吧?两个组件,我们就得到了一个漂亮的工具提示。
添加图例
我们将对图例执行相同的操作。我们将使用来自 chart
的 ChartLegend
和 ChartLegendContent
组件。
导入 ChartLegend
和 ChartLegendContent
组件。
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
将组件添加到您的图表。
<ChartContainer config={chartConfig} className="h-[200px] w-full">
<BarChart accessibilityLayer data={chartData}>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip content={<ChartTooltipContent />} />
<ChartLegend content={<ChartLegendContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
<Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
</BarChart>
</ChartContainer>
完成。您已经构建了您的第一个图表!接下来是什么?
图表配置
图表配置是您定义图表的标签、图标和颜色的地方。
它有意与图表数据解耦。
这允许您在图表之间共享配置和颜色标记。它也可以独立工作,适用于您的数据或颜色标记远程存在或采用不同格式的情况。
import { Monitor } from "lucide-react"
import { type ChartConfig } from "@/components/ui/chart"
const chartConfig = {
desktop: {
label: "Desktop",
icon: Monitor,
// A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
color: "#2563eb",
// OR a theme object with 'light' and 'dark' keys
theme: {
light: "#2563eb",
dark: "#dc2626",
},
},
} satisfies ChartConfig
主题化
图表内置了主题化支持。您可以使用 CSS 变量(推荐)或任何颜色格式的颜色值,例如 hex、hsl 或 oklch。
CSS 变量
在您的 CSS 文件中定义您的颜色
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
// ...
--chart-1: 12 76% 61%;
--chart-2: 173 58% 39%;
}
.dark: {
--background: 240 10% 3.9%;
--foreground: 0 0% 100%;
// ...
--chart-1: 220 70% 50%;
--chart-2: 160 60% 45%;
}
}
将颜色添加到您的 chartConfig
const chartConfig = {
desktop: {
label: "Desktop",
color: "hsl(var(--chart-1))",
},
mobile: {
label: "Mobile",
color: "hsl(var(--chart-2))",
},
} satisfies ChartConfig
我们在这里将值包装在 hsl()
中,因为我们定义颜色时没有颜色空间函数。
这不是必需的。您可以使用完整的颜色值,例如 hex、hsl 或 oklch。
--chart-1: oklch(70% 0.227 154.59);
color: "var(--chart-1)",
hex、hsl 或 oklch
您也可以直接在图表配置中定义颜色。使用您喜欢的颜色格式。
const chartConfig = {
desktop: {
label: "Desktop",
color: "#2563eb",
},
} satisfies ChartConfig
使用颜色
要在您的图表中使用主题颜色,请使用格式 var(--color-KEY)
引用颜色。
组件
<Bar dataKey="desktop" fill="var(--color-desktop)" />
图表数据
const chartData = [
{ browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]
Tailwind
<LabelList className="fill-[--color-desktop]" />
工具提示
图表工具提示包含标签、名称、指示器和值。您可以结合使用这些来自定义您的工具提示。
您可以使用 hideLabel
、hideIndicator
属性打开/关闭其中任何一个,并使用 indicator
属性自定义指示器样式。
使用 labelKey
和 nameKey
为工具提示标签和名称使用自定义键。
图表带有 <ChartTooltip>
和 <ChartTooltipContent>
组件。您可以使用这两个组件向图表添加自定义工具提示。
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
<ChartTooltip content={<ChartTooltipContent />} />
属性
使用以下属性自定义工具提示。
属性 | 类型 | 描述 |
---|---|---|
labelKey | 字符串 | 用于标签的配置或数据键。 |
nameKey | 字符串 | 用于名称的配置或数据键。 |
indicator | dot line 或 dashed | 工具提示的指示器样式。 |
hideLabel | 布尔值 | 是否隐藏标签。 |
hideIndicator | 布尔值 | 是否隐藏指示器。 |
颜色
颜色会自动从图表配置中引用。
自定义
要为工具提示标签和名称使用自定义键,请使用 labelKey
和 nameKey
属性。
const chartData = [
{ browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]
const chartConfig = {
visitors: {
label: "Total Visitors",
},
chrome: {
label: "Chrome",
color: "hsl(var(--chart-1))",
},
safari: {
label: "Safari",
color: "hsl(var(--chart-2))",
},
} satisfies ChartConfig
<ChartTooltip
content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>
这将使用 Total Visitors
作为标签,并使用 Chrome
和 Safari
作为工具提示名称。
图例
您可以使用自定义的 <ChartLegend>
和 <ChartLegendContent>
组件向图表添加图例。
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
<ChartLegend content={<ChartLegendContent />} />
颜色
颜色会自动从图表配置中引用。
自定义
要为图例名称使用自定义键,请使用 nameKey
属性。
const chartData = [
{ browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
{ browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]
const chartConfig = {
chrome: {
label: "Chrome",
color: "hsl(var(--chart-1))",
},
safari: {
label: "Safari",
color: "hsl(var(--chart-2))",
},
} satisfies ChartConfig
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />
这将使用 Chrome
和 Safari
作为图例名称。
可访问性
您可以打开 accessibilityLayer
属性以向图表添加可访问层。
此属性为您的图表添加键盘访问和屏幕阅读器支持。
<LineChart accessibilityLayer />