ChartCN 是一个免费开源的 shadcn 图表生成器，支持粘贴数据、选择图表并复制单个 TSX 文件，仅依赖 shadcn/ui 图表组件和 Recharts 3。教程演示在 Next.js 中生成收入与支出柱状图：初始化 shadcn/ui、添加图表组件、生成代码、接入页面，并通过 Server Component 传入实时数据。颜色由 CSS 变量经 chartConfig 流转，自动适配深色模式；null 值显示为数据缺口。