文档
图表

图表

漂亮的图表。使用 Recharts 构建。复制粘贴到您的应用程序中。

柱状图 - 交互式

显示过去 3 个月的总访问量

介绍 **图表**。一系列图表组件，您可以将它们复制粘贴到您的应用程序中。

图表旨在开箱即用地看起来很棒。它们与其他组件配合良好，并且可以完全自定义以适应您的项目。

浏览图表库.

组件

我们在幕后使用 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 版本时，您可以遵循官方升级路径来升级您的图表。

这些组件是您的.

安装

运行以下命令以安装 chart.tsx

npx 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%;
  }
}

您的第一个图表

让我们构建您的第一个图表。我们将构建一个柱状图，添加网格、轴、工具提示和图例。

首先定义您的数据

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

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 组件构建图表。

"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 变量（推荐）或任何颜色格式的色值，例如十六进制、hsl 或 oklch。

CSS 变量

在您的 CSS 文件中定义您的颜色。

globals.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 或 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]" />

工具提示

图表工具提示包含标签、名称、指示器和值。您可以组合使用这些元素来自定义您的工具提示。

标签
页面浏览量
桌面
186
移动
80
名称
Chrome
1,286
Firefox
1,000
页面浏览量
桌面
12,486
指示器
Chrome
1,286

您可以使用 hideLabel、hideIndicator 属性启用/禁用其中任何一个，并使用 indicator 属性自定义指示器样式。

使用 labelKey 和 nameKey 为工具提示标签和名称使用自定义键。

图表附带了 <ChartTooltip> 和 <ChartTooltipContent> 组件。您可以使用这两个组件向图表添加自定义工具提示。

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

属性

使用以下属性自定义工具提示。

属性类型描述
labelKey字符串要用于标签的配置或数据键。
nameKey字符串要用于名称的配置或数据键。
indicatordot 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 />
轮播复选框