106k
New

图表

PreviousNext

美观的图表。使用 Recharts 构建。复制并粘贴到你的应用中。

Radix UIBase UI
Bar Chart - Interactive
Showing total visitors for the last 3 months

介绍 图表。一组图表组件，你可以复制粘贴到你的应用中。

图表设计得开箱即用，外观优美。它们和其他组件配合良好，并且完全可定制以适应你的项目。

浏览图表库。

组件

我们底层使用的是 Recharts。

我们设计了 chart 组件时考虑了组合的思想。你使用 Recharts 组件构建你的图表，仅在需要时引入自定义组件，比如 ChartTooltip。

import { Bar, BarChart } from "recharts"
 
import { ChartContainer, ChartTooltipContent } from "@/components/ui/chart"
 
export function MyChart() {
  return (
    <ChartContainer>
      <BarChart data={data}>
        <Bar dataKey="value" />
        <ChartTooltip content={<ChartTooltipContent />} />
      </BarChart>
    </ChartContainer>
  )
}

我们不对 Recharts 进行封装。这意味着你不会被锁定在某个抽象层。当 Recharts 发布新版本时，你可以按照官方升级路径升级你的图表。

这些组件是属于你的。

安装

pnpm dlx shadcn@latest add chart

你的第一个图表

让我们构建你的第一个图表。我们将构建一个柱状图，添加网格、坐标轴、提示信息和图例。

首先定义你的数据

以下数据代表每个月的桌面和移动端用户数。

components/example-chart.tsx
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 },
]

定义图表配置

图表配置持有图表的配置项。人类可读的字符串，比如标签、图标和主题使用的颜色令牌，都放在这里。

components/example-chart.tsx
import { type ChartConfig } from "@/components/ui/chart"
 
const chartConfig = {
  desktop: {
    label: "桌面",
    color: "#2563eb",
  },
  mobile: {
    label: "移动端",
    color: "#60a5fa",
  },
} satisfies ChartConfig

构建你的图表

现在你可以用 Recharts 组件构建你的图表了。

"use client"

import { ChartContainer, type ChartConfig } from "@/components/ui/chart"

添加网格

让我们给图表添加网格。

导入 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>
"use client"

import { ChartContainer, type ChartConfig } from "@/components/ui/chart"

添加坐标轴

为了给图表添加 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>
"use client"

import { ChartContainer, type ChartConfig } from "@/components/ui/chart"

添加提示信息（Tooltip）

到目前为止我们只用到了 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>
"use client"

import {

将鼠标悬停以查看提示信息。很简单吧？两个组件，我们就实现了一个漂亮的提示框。

添加图例

我们用同样的方法添加图例。使用 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>
"use client"

import {

完成了。你已经构建了你的第一个图表！接下来呢？

图表配置

图表配置是你定义标签、图标和图表颜色的位置。

它有意与图表数据解耦。

这让你可以在多个图表之间共享配置和颜色令牌。也可以独立使用于数据或颜色令牌来自远程或不同格式的情况。

import { Monitor } from "lucide-react"
 
import { type ChartConfig } from "@/components/ui/chart"
 
const chartConfig = {
  desktop: {
    label: "桌面",
    icon: Monitor,
    // 颜色可以是类似 'hsl(220, 98%, 61%)' 或 'var(--color-name)'
    color: "#2563eb",
    // 或者是包含 'light' 和 'dark' 主题颜色的对象
    theme: {
      light: "#2563eb",
      dark: "#dc2626",
    },
  },
} satisfies ChartConfig

主题

图表内置主题支持。你可以使用 CSS 变量（推荐）或者任意颜色格式的颜色值，如 hex、hsl 或 oklch。

CSS 变量

在 CSS 文件中定义你的颜色

app/globals.css
@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }
 
  .dark {
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
  }
}

在你的 chartConfig 中添加这些颜色

components/example-chart.tsx
const chartConfig = {
  desktop: {
    label: "桌面",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "移动端",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

hex、hsl 或 oklch

你也可以直接在图表配置中定义颜色。使用你喜欢的颜色格式。

components/example-chart.tsx
const chartConfig = {
  desktop: {
    label: "桌面",
    color: "#2563eb",
  },
  mobile: {
    label: "移动端",
    color: "hsl(220, 98%, 61%)",
  },
  tablet: {
    label: "平板",
    color: "oklch(0.5 0.2 240)",
  },
  laptop: {
    label: "笔记本",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig

使用颜色

要在图表中使用主题颜色，使用格式 var(--color-KEY) 引用颜色。

组件中

<Bar dataKey="desktop" fill="var(--color-desktop)" />

图表数据中

components/example-chart.tsx
const chartData = [
  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]

Tailwind 中

components/example-chart.tsx
<LabelList className="fill-[--color-desktop]" />

提示信息（Tooltip）

图表的提示信息包含标签、名称、指示器和值。你可以组合这些来自定义你的提示框。

Label
Page Views
Desktop
186
Mobile
80
Name
Chrome
1,286
Firefox
1,000
Page Views
Desktop
12,486
Indicator
Chrome
1,286

你可以通过 hideLabel、hideIndicator 属性关闭显示标签或指示器，通过 indicator 属性自定义指示器样式。

使用 labelKey 和 nameKey 可以为提示框使用自定义的标签和名称键。

图表提供 <ChartTooltip> 和 <ChartTooltipContent> 两个组件，你可以用它们为图表添加自定义提示。

components/example-chart.tsx
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
components/example-chart.tsx
<ChartTooltip content={<ChartTooltipContent />} />

属性

以下属性可以用来定制提示框。

属性类型描述
labelKeystring用于提示标签的配置或数据键
nameKeystring用于提示名称的配置或数据键
indicatordot、line 或 dashed提示框指示器样式
hideLabelboolean是否隐藏标签
hideIndicatorboolean是否隐藏指示器

颜色

颜色会自动从图表配置中引用。

自定义示例

如果要自定义提示标签和名称的键，使用 labelKey 和 nameKey。

const chartData = [
  { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
]
 
const chartConfig = {
  visitors: {
    label: "总访客数",
  },
  chrome: {
    label: "Chrome",
    color: "hsl(var(--chart-1))",
  },
  safari: {
    label: "Safari",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig
components/example-chart.tsx
<ChartTooltip
  content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
/>

这样提示框会显示 总访客数 作为标签，Chrome 和 Safari 作为提示名称。

图例（Legend）

你可以使用自定义的 <ChartLegend> 和 <ChartLegendContent> 组件为图表添加图例。

components/example-chart.tsx
import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
components/example-chart.tsx
<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
components/example-chart.tsx
<ChartLegend content={<ChartLegendContent nameKey="browser" />} />

这样图例中会显示 Chrome 和 Safari 作为名称。

无障碍支持（Accessibility）

你可以开启 accessibilityLayer 属性，为你的图表添加无障碍层。

这个属性为你的图表添加键盘访问和屏幕阅读器支持。

components/example-chart.tsx
<LineChart accessibilityLayer />