在任务列表中，创建图表似乎是一项简单的任务。但当你打开 Recharts 的文档后，就会发现其实每个图表的设置都需要耗费不少精力：需要为标签和颜色配置相应的对象、设置坐标轴、添加工具提示、设计图例、选择适合深色模式的配色方案，还要确保图表容器能够正确地调整大小。我们大多数人都会从上一个项目中复制这些设置内容，然后重新命名相关变量即可。

shadcn/ui 图表组件在一定程度上减轻了这些工作负担。它为 Recharts 提供了与主题风格相匹配的配色方案和工具提示功能，但用户仍然需要手动编写每个图表的代码。

因此，我开发了 ChartCN——这个免费且开源的 shadcn 图表生成工具。你只需粘贴数据、选择所需的图表类型，然后复制一个仅依赖于 shadcn/ui 图表组件和 Recharts 的 TSX 文件即可。ChartCN 使用 MIT 许可协议，使用时无需注册账户或下载任何额外插件。

在本教程中，你将学习如何在一个新的 Next.js 应用程序中添加收入与支出的柱状图。我们会详细解释生成代码的每一部分的作用，然后教你如何将这个图表与服务器组件中加载的数据关联起来。虽然这个工具可以节省你的输入工作量，但第 5 步和第 6 步中的操作方法适用于任何使用 shadcn/ui 图表组件的情况，无论你是通过它生成的图表，还是自己手动编写的代码。

先决条件：你需要熟悉 React，并且已经安装了 Node.js。对 Next.js 应用程序的路由系统有基本了解会更有帮助，但每个步骤都会被详细解释。

目录

• 你将构建什么

• 步骤 1：创建 Next.js 应用程序并初始化 shadcn/ui

• 步骤 2：添加 shadcn/ui 图表组件

• 步骤 3：在 ChartCN 中生成图表组件

• 步骤 4：将图表添加到你的页面中

• 步骤 5：理解生成的代码

• 步骤 6：将实时数据作为属性传递

• 常见问题及解决方法

• 总结

你将构建什么

完成本教程后，你将会得到两个页面：

• / 页面会显示一个直接在组件中编写数据的分组柱状图。这是将图表展示在屏幕上最快的方法。

• /live 页面会显示相同的图表，但数据是从服务器端运行的异步函数中获取的。这种版本适用于与真实数据库或 API 进行交互的情况。

该图表使用了渐变条、简洁的轴标签（显示为“40K”而非“40000”）、图例，以及一个工具提示框，用于显示当月的总数据及各数据系列所占的比例。

步骤 1：创建 Next.js 应用程序并初始化 shadcn/ui

创建一个新的应用程序并进入该目录：

npx create-next-app@latest my-charts-app
cd my-charts-app

接受系统推荐的默认设置。您需要使用 TypeScript、Tailwind CSS 以及 App Router。

接下来，初始化 shadcn/ui：

npx shadcn@latest init

这条命令会完成三件对后续操作至关重要的事情：

1. 它会生成 components.json 文件，该文件用于指定 shadcn/ui CLI 应将组件放置在哪里。

2. 它还会添加 lib/utils.ts 文件，其中包含了用于合并类的辅助函数 cn()。

3. 它会将主题相关变量写入 app/globals.css 文件中，其中包括五种图表颜色：--chart-1 到 ，并且为浅色模式和深色模式分别设置了不同的颜色值。

这五种图表颜色非常重要。所有生成的图表都会使用这些颜色设置，因此如果您想要更改整个应用程序中所有图表的颜色，只需修改一行 CSS 代码即可。

步骤 2：添加 shadcn/ui 图表组件

现在来添加图表组件：

npx shadcn@latest add chart

这条命令会安装 recharts 库，并生成 components/ui/chart.tsx 文件。该文件包含了后续代码中会用到的基础组件：

• ChartContainer 组件用于包裹 Recharts 的 ResponsiveContainer，从而使图表能够填充其父元素的整个空间。

• ChartConfig 是一个对象类型，用于将每个数据键映射到对应的标签和颜色值上。

• ChartTooltip、ChartTooltipContent、ChartLegend 和 ChartLegendContent 分别是 Recharts 提供的工具提示框和图例组件的样式化版本。

在继续下一步之前，请先确认安装了哪个版本的 Recharts：

npm ls recharts

如果生成的代码中使用的 Recharts 版本是 2.x 系列，那么请升级到最新版本：

npm install recharts@latest

总结： shadcn/ui 图表组件实际上只是在 Recharts 的基础上添加了一层自定义样式，它并不会替代 Recharts 本身，而是为 Recharts 提供了统一的主题风格。

步骤 3：在 ChartCN 中生成图表组件

打开 ChartCN 条形图页面。数据面板中有三个选项卡：粘贴数据、上传文件 和 编辑表格。请将以下 CSV 数据粘贴到 粘贴数据 选项卡中：

月份,收入,支出
1月,42000,31000
2月,58000,34000
3月,51000,29000
4月,67000,38000
5月,72000,41000
6月,69000,37000

ChartCN会将第一列视为分类轴（对于柱状图来说就是X轴），而其他列则被视为数值序列。JSON、TSV和Markdown格式的表格也同样适用，系统会自动识别这些格式。

在预览上方，设置以下选项：

• 布局： 分组显示

• 工具提示： 显示详细信息

• 代码展示方式： 内嵌数据展示

然后点击预览下方chart.tsx面板中的复制组件按钮。

步骤4：将图表添加到您的页面中

在components/revenue-chart.tsx文件中创建一个新的文件，然后将复制的代码粘贴进去。

请不要将其保存为components/ui/chart.tsx。ChartCN生成的组件会被命名为chart.tsx，但该路径下已经存在步骤2中使用的shadcn组件，如果覆盖它，会导致您应用程序中的所有图表都无法正常显示。

生成的组件总是被导出为Chart类型，因此在导入时请给它起一个更清晰的名称。将app/page.tsx文件中的代码替换为以下内容：

// app/page.tsx
import { Chart as RevenueChart } from "@/components/revenue-chart"

export default function Home() {
  return (
    
收入与支出对比图
      
    

// components/revenue-chart.tsx
"use client"

import { useId } from "react"
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
} from "@/components/ui/chart"

const data = [
  { Month: "Jan", Revenue: 42000, Expenses: 31000 },
  { Month: "Feb", Revenue: 58000, Expenses: 34000 },
  // ...
]

const chartConfig = {
  Revenue: { label: "收入", color: "var(--chart-1)" },
  Expenses: { label: "支出", color: "var(--chart-2)" },
} satisfies ChartConfig

<ChartContainer config={chartConfig} className="aspect-auto h-[350px] w-full">
  <BarChart accessibilityLayer data={data} barCategoryGap="30%" barGap={4}>
    {/* ...梯度效果、网格布局、坐标轴、工具提示、图例等元素... */}
    <Bar
      dataKey="Revenue"
      fill="var(--color-Revenue)"
      shape={(props) => <Rectangle {...props} fill[`url(#${uid}-fill-0)`} />}
      radius={[6, 6, 0, 0]}
      maxBarSize={36}
    />
  </BarChart>
</ChartContainer>

• 高度是通过h-[350px]这个属性来设置的，因此您可以在ChartContainer中修改这个值。

• 梯度效果是由shape属性实现的，而fill属性则用于设置纯色填充。这就是为什么图例和工具提示中的颜色是纯色而非渐变色的原因。

• uid这个变量是通过useId()函数生成的，因此如果在同一页面上渲染两个图表，它们的梯度ID也会保持唯一性。

// components/revenue-chart-live.tsx
export type ChartRow = { Month: string; Revenue: number | null; Expenses: number | null }

export interface ChartProps {
  data: ChartRow[]
}

// ...其他配置信息保持不变...

export function Chart({ data }: ChartProps) {
  // ...与之前相同的JSX代码
}

// lib/get-revenue.ts
import type { ChartRow } from 「@components/revenue-chart-live」

export async function getRevenue(): Promise {
  // 请用您的数据库查询或API调用替换此代码。
  // 例如：const res = await fetch("https://api.example.com/revenue")
  return [
    { Month: "1月", Revenue: 42000, Expenses: 31000 },
    { Month: "2月", Revenue: 58000, Expenses: 34000 },
    { Month: "3月", Revenue: 51000, Expenses: 29000 },
    { Month: "4月", Revenue: 67000, Expenses: 38000 },
    { Month: "5月", Revenue: 72000, Expenses: null },
  ]
}

// app/live/page.tsx
import { Chart as RevenueChart } from 「@components/revenue-chart-live」
import { getRevenue } from 「lib/get-revenue」

export default async function LivePage() {
  const data = await getRevenue()

  return (
    

      
收入与支出对比
      
    
  )
}