Chart-GPT：开源文本转图表AI工具，秒级生成美观可视化图表

一、Chart-GPT是什么？

Chart-GPT是一款开源的AI驱动型数据可视化工具，其核心定位是“将文本描述快速转化为高质量图表”，让用户无需掌握复杂的图表制作技能（如Excel、Tableau操作），也无需手动整理数据格式，仅通过自然语言提问或描述数据需求，即可在几秒内获得结构清晰、美观易用的可视化图表。

无论是职场报告制作、学生论文数据可视化，还是市场分析图表生成，Chart-GPT都能大幅降低图表制作门槛，实现“文本描述→图表生成”的秒级转化，适用于各类需要快速可视化数据的场景。

从项目设计理念来看，Chart-GPT旨在解决“数据可视化门槛高”的痛点——传统图表制作需要用户手动录入数据、调整格式、设计样式，过程繁琐且耗时，而Chart-GPT通过AI技术自动解析文本中的数据逻辑，快速生成结构化数据并渲染为可视化图表，大幅提升数据可视化效率。

二、功能特色

Chart-GPT的功能设计围绕“易用性、高效性、可扩展性”三大核心，既满足普通用户快速生成图表的基础需求，也支持开发者通过扩展配置实现商业化相关功能（如信用系统、支付集成）。以下是其核心功能特色的详细介绍，结合项目文档与实际功能演示整理：

（一）核心功能：文本驱动的秒级图表生成

这是Chart-GPT最核心的功能，用户只需输入自然语言描述的可视化需求，无需手动提供结构化数据，AI即可自动解析并生成对应图表。例如：

• 输入“2018-2020年全球百万人口死亡率”，系统自动生成时间序列相关图表；

• 输入“2023年Top5 HR SaaS工具按popularity排名”，系统生成柱状图并展示对应工具（如Workday、SuccessFactors、Oracle HCM等）的排名数据；

• 输入“运动鞋行业Top3市场领导者的市场份额（百万级）”，自动生成对比类图表。

该功能的核心优势在于“零数据准备成本”——用户无需整理Excel表格或JSON数据，仅通过文本描述即可触发AI的数据解析与图表渲染，整个过程耗时仅需几秒，大幅提升可视化效率。

（二）图表个性化配置：灵活调整满足多样需求

Chart-GPT提供了基础且实用的图表自定义功能，用户可根据需求调整图表样式，无需掌握专业设计技能：

1. 图表类型选择：目前支持柱状图（Bar Chart）等基础图表类型，可满足大部分对比类、排名类数据的可视化需求；

2. 颜色自定义：支持图表主色调调整（如默认蓝色，可按需切换），适配不同使用场景（如报告、PPT、论文）的风格要求；

3. 显示控制：可自由选择是否显示图表标题、图例，避免冗余信息，让图表更简洁；

4. 二次优化：提供“Retry（重试）”功能，若生成的图表不符合预期，可重新触发AI生成，优化结果。

（三）图表导出与分享：便捷复用生成结果

生成图表后，用户可通过“Download（下载）”功能导出图表文件，便于在报告、PPT、论文等场景中直接复用，无需额外截图或格式转换，提升工作流连续性。项目文档中提到“fix mobile chart overflow and export”，说明导出功能已适配移动端，确保不同设备下的使用体验一致。

（四）多端适配：明暗主题与响应式设计

1. 明暗主题切换：集成Tailwind CSS实现黑暗模式（dark theme）与浅色模式（light theme）切换，适配不同使用环境（如夜间办公、强光环境），降低视觉疲劳；

2. 响应式适配：针对移动端进行了专项优化，修复了“mobile chart overflow（移动端图表溢出）”问题，确保在手机、平板等移动设备上也能正常显示图表，支持随时随地生成与查看。

（五）扩展功能：用户认证与信用系统（需额外配置）

Chart-GPT支持通过扩展配置实现商业化相关功能，满足批量使用或团队协作需求：

1. Google登录认证：通过NextAuth集成Google登录，实现用户身份验证，便于记录个人生成记录、管理信用额度；

2. 信用系统：需搭配Supabase（数据存储）与Stripe（支付处理）实现，用户可通过购买“credits（信用额度）”解锁更多生成次数或高级功能；

3. 支付集成：通过Stripe实现支付功能，支持信用额度的购买与管理，适用于商业化部署或团队内部计费场景。

（六）开源可扩展：支持二次开发与贡献

作为开源项目，Chart-GPT提供了完整的代码结构与贡献指南，开发者可基于现有代码进行二次开发，例如：

• 扩展图表类型（如折线图、饼图、雷达图等）；

• 集成其他AI API（如OpenAI GPT-4、Anthropic Claude等）；

• 新增自定义功能（如数据导入、图表模板保存等）；

• 优化UI设计，适配特定行业场景（如金融、教育、医疗）。

为更清晰呈现功能特色与使用条件，以下是功能特色汇总表：

三、技术细节

Chart-GPT的技术栈选择围绕“前端高效渲染、AI能力集成、可扩展性”展开，整体架构清晰，技术选型成熟，适合开源项目的维护与二次开发。以下从技术栈、项目结构、核心架构、依赖库等方面详细解析：

（一）核心技术栈明细表

（二）项目结构解析

Chart-GPT的项目结构遵循Next.js的规范，同时按功能模块划分目录，逻辑清晰，便于开发者理解与修改。以下是核心目录与文件的作用说明：

（三）核心工作流程

Chart-GPT的核心工作流程可分为“文本输入→AI解析→图表渲染→结果导出”四个步骤，具体逻辑如下：

1. 用户交互层：用户通过前端界面输入文本描述（如“2023年Top5 HR SaaS工具按popularity排名”），选择图表类型、颜色等配置，点击“Draw（生成）”按钮提交请求；

2. AI解析层：前端通过axios调用PaLM API（需配置BARD_KEY），将用户文本输入传递给AI模型；AI模型解析文本中的数据维度（如“HR SaaS工具”“popularity”“Top5”）、数据关系（如排名），生成结构化数据（如JSON格式的工具名称与对应popularity数值）；

3. 图表渲染层：前端可视化库接收AI返回的结构化数据，结合用户选择的图表类型、颜色等配置，渲染生成对应的图表（如柱状图），并展示在界面上；

4. 结果复用层：用户可查看生成的图表，通过“Retry”按钮重新生成，或通过“Download”按钮导出图表文件，完成可视化流程。

若启用扩展功能（Google登录、信用系统），则在用户交互层前增加“身份认证”步骤，通过NextAuth验证用户身份，再通过Supabase查询用户信用额度，判断是否允许生成图表；若信用额度不足，引导用户通过Stripe购买信用，完成支付后更新信用额度并允许生成。

（四）技术亮点

1. 轻量高效：基于Next.js的SSR能力，提升页面加载速度，减少客户端资源消耗；Tailwind CSS的原子化样式减少冗余代码，让项目更轻量化；

2. 类型安全：全程使用TypeScript开发，通过类型定义确保数据传输、函数调用的准确性，降低后期维护成本；

3. 可扩展性强：核心功能与扩展功能解耦，基础部署无需依赖Supabase、Stripe等服务，仅需配置PaLM API即可使用核心的文本转图表功能；扩展功能可按需配置，灵活适配个人使用、团队协作、商业化部署等不同场景；

4. 适配性好：通过响应式设计与移动端优化，确保在PC、手机、平板等多设备上的使用体验一致；明暗主题切换满足不同环境下的视觉需求；

5. 开源友好：项目结构清晰，文档完善，提供了详细的启动步骤与贡献指南，降低开发者二次开发与贡献代码的门槛。

四、应用场景

Chart-GPT的核心价值是“降低数据可视化门槛、提升效率”，其应用场景覆盖个人、职场、教育、商业等多个领域，只要涉及“快速将文本描述转化为图表”的需求，均可发挥作用。以下是具体应用场景的详细介绍：

（一）职场办公场景

1. 报告/PPT制作

• 适用人群：职场白领、市场专员、运营人员、HR等需要频繁制作报告或PPT的群体；

• 核心需求：快速将报告中的数据描述（如“本季度各部门业绩占比”“近半年用户增长趋势”）转化为图表，提升报告可读性；

• 使用方式：输入文本描述（如“2023年Q3销售部、市场部、研发部、HR部业绩占比，分别为35%、20%、30%、15%”），选择柱状图/饼图，生成后直接下载插入PPT或报告中，无需手动用Excel制作图表；

• 价值体现：原本需要10-15分钟的图表制作流程（整理数据→打开Excel→录入数据→设计图表→导出），可缩短至几秒，大幅提升办公效率。

2. 会议快速可视化

• 适用人群：项目经理、部门负责人、企业管理者；

• 核心需求：会议中讨论数据相关话题时（如“各项目进度对比”“客户满意度分布”），快速生成图表辅助沟通，让参会者更直观理解数据；

• 使用方式：会议中实时输入文本描述（如“项目A进度80%、项目B进度60%、项目C进度90%，按项目名称对比”），生成图表后投影展示，无需提前准备；

• 价值体现：提升会议沟通效率，避免纯文字描述的抽象性，让数据对比更清晰。

（二）学术科研场景

1. 论文数据可视化

• 适用人群：大学生、研究生、科研人员；

• 核心需求：将论文中的实验数据、调研结果（如“不同实验条件下的误差率对比”“各年龄段受访者满意度”）转化为规范、美观的图表，符合学术论文格式要求；

• 使用方式：输入文本描述（如“实验1误差率5.2%、实验2误差率3.8%、实验3误差率4.5%，按实验编号排序”），选择折线图/柱状图，调整颜色为论文要求的风格（如黑白、蓝色系），导出后插入论文；

• 价值体现：无需掌握Origin、Matlab等专业科研绘图工具，降低学术可视化门槛，同时图表样式规范，符合论文发表要求。

2. 课程作业/调研报告

• 适用人群：中学生、大学生；

• 核心需求：完成课程作业、调研报告时，将数据描述转化为图表，提升作业质量；

• 使用方式：输入文本描述（如“2019-2023年我国新能源汽车销量，分别为120万、136万、352万、567万、780万辆”），生成折线图，展示销量增长趋势；

• 价值体现：让作业/报告更具专业性，同时节省手动制作图表的时间，专注于内容创作。

（三）商业分析场景

1. 市场调研与行业分析

• 适用人群：市场分析师、行业研究员、创业者；

• 核心需求：将市场调研数据、行业报告中的描述（如“Top3智能手机品牌市场份额”“各细分领域增长率”）转化为图表，辅助决策；

• 使用方式：输入文本描述（如“2023年智能手机市场，苹果份额20%、三星18%、小米14%、其他48%”），生成饼图，直观展示市场格局；

• 价值体现：快速将非结构化的文本数据转化为结构化图表，便于发现市场趋势、竞争格局，为商业决策提供数据支撑。

2. 竞品分析

• 适用人群：产品经理、市场专员；

• 核心需求：对比竞品的核心指标（如“竞品A、B、C的用户留存率”“功能覆盖率”），生成对比图表；

• 使用方式：输入文本描述（如“竞品A30日留存率45%、竞品B38%、竞品C52%，按留存率降序排列”），生成柱状图，清晰展示竞品差距；

• 价值体现：简化竞品数据可视化流程，让对比分析更直观，辅助产品功能优化与市场策略制定。

（四）教育教学场景

1. 教师教学辅助

• 适用人群：中小学、大学教师；

• 核心需求：制作教案、课件时，将知识点相关数据（如“各朝代疆域面积”“数学成绩分布”）转化为图表，提升教学直观性；

• 使用方式：输入文本描述（如“唐朝疆域1237万平方公里、宋朝280万平方公里、元朝1372万平方公里、明朝997万平方公里”），生成柱状图，用于历史课堂讲解；

• 价值体现：让抽象的数据更易理解，提升课堂教学效果，同时节省教师制作课件的时间。

2. 学生数据展示

• 适用人群：学生群体；

• 核心需求：课堂展示、小组汇报时，将汇报内容中的数据转化为图表，提升展示效果；

• 使用方式：输入文本描述（如“小组调研中，喜欢篮球的同学占30%、足球25%、羽毛球40%、其他5%”），生成饼图，用于课堂展示；

• 价值体现：让汇报内容更具专业性和说服力，提升展示效果，同时锻炼数据可视化思维。

（五）开发者/二次开发场景

1. 个人工具定制

• 适用人群：程序员、技术爱好者；

• 核心需求：基于Chart-GPT的开源代码，定制符合个人需求的文本转图表工具（如增加特定图表类型、集成其他AI API）；

• 使用方式：克隆仓库，修改代码扩展功能（如集成OpenAI GPT-4 API提升文本解析精度、新增雷达图渲染功能），本地部署使用；

• 价值体现：获得个性化的可视化工具，同时提升Next.js、TypeScript、AI API集成等技术能力。

2. 商业产品开发

• 适用人群：创业团队、企业技术部门；

• 核心需求：基于Chart-GPT的核心功能，开发商业化的可视化工具（如SaaS平台、嵌入式组件）；

• 使用方式：二次开发时集成团队已有的用户系统、支付系统，扩展高级功能（如数据导入、图表模板库、团队协作），部署为商业产品；

• 价值体现：节省从零开发文本转图表工具的成本，快速推出商业化产品，聚焦于差异化功能与用户体验优化。

五、使用方法

Chart-GPT的使用分为“在线体验”和“本地部署”两种方式，其中在线体验无需配置环境，适合普通用户快速试用；本地部署支持完整功能自定义，适合开发者或需要长期使用的用户。以下是详细的使用步骤：

（一）在线体验（推荐普通用户）

在线体验无需配置任何环境，直接通过官方网站使用，步骤如下：

1. 访问官方网站：打开浏览器，输入地址www.chartgpt.dev；

2. 登录认证：点击页面右上角“Sign in with Google”，使用Google账号完成登录（若无需保存记录，可跳过登录直接使用基础功能）；

3. 输入文本需求：在输入框中填写可视化需求（如“2023年Top5 HR SaaS工具按popularity排名”）；

4. 配置图表参数：

• 选择图表类型（默认支持Bar Chart，可按需切换）；

• 调整颜色（默认蓝色，点击颜色选择器修改）；

• 勾选是否显示“Chart Title（图表标题）”“Chart Legend（图例）”；

5. 生成图表：点击“Draw”按钮，等待几秒即可生成图表；

6. 优化或导出：

• 若图表不符合预期，点击“Retry”按钮重新生成；

• 若满意，点击“Download”按钮导出图表文件，用于报告、PPT等场景。

（二）本地部署（适合开发者/长期使用）

本地部署可实现完整功能控制，支持二次开发与扩展配置，步骤如下：

1. 前置准备

• 安装必要工具：确保本地已安装Node.js（推荐v14+）、npm/yarn、Git；

• 获取API密钥：前往Google PaLM API官方平台申请API密钥（即BARD_KEY），用于调用AI解析功能；

• （可选）扩展功能准备：若需使用Google登录、信用系统、支付功能，需提前注册Supabase、Stripe、Google开发者账号，获取对应配置信息。

2. 克隆仓库与环境配置

1. 克隆仓库：打开终端，执行以下命令克隆项目到本地：

   git clone https://github.com/whoiskatrin/chart-gpt.git
   cd chart-gpt

2. 配置环境变量：

• 复制环境变量模板文件：执行命令 cp .env.example .env（Windows系统使用 copy .env.example .env）；

• 编辑.env文件：用文本编辑器打开.env文件，填写必要配置：

  # 核心配置：PaLM API密钥（必填）
  BARD_KEY="your-api-key" # 替换为你的PaLM API密钥
  
  # （可选）扩展功能配置：Google登录、信用系统、支付
  # NextAuth相关（Google登录）
  NEXTAUTH_URL="http://localhost:3000" # 本地部署地址
  NEXTAUTH_SECRET="your-nextauth-secret" # 生成随机字符串作为密钥
  GOOGLE_CLIENT_ID="your-google-client-id" # Google开发者账号的Client ID
  GOOGLE_CLIENT_SECRET="your-google-client-secret" # Google开发者账号的Client Secret
  
  # Supabase相关（数据存储）
  NEXT_PUBLIC_SUPABASE_URL="your-supabase-url" # Supabase项目URL
  NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key" # Supabase匿名密钥
  
  # Stripe相关（支付）
  NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your-stripe-publishable-key" # Stripe公钥
  STRIPE_SECRET_KEY="your-stripe-secret-key" # Stripe密钥
  STRIPE_WEBHOOK_SECRET="your-stripe-webhook-secret" # Stripe Webhook密钥

• 说明：核心功能仅需填写BARD_KEY；扩展功能（Google登录、信用系统）需填写对应服务的配置信息，可参考各服务官方文档获取。

3. 安装依赖与启动服务

1. 安装依赖：执行以下命令安装项目所需依赖：

   # 使用npm
   npm install
   
   # 或使用yarn
   yarn

2. 启动开发服务器：

   # 使用npm
   npm run dev
   
   # 或使用yarn
   yarn dev

3. 访问应用：启动成功后，打开浏览器访问 http://localhost:3000，即可使用本地部署的Chart-GPT，功能与在线版一致，且支持代码修改后的实时预览。

4. （可选）完整功能部署

若需使用信用系统、支付等扩展功能，还需完成以下配置：

1. Supabase配置：

• 在Supabase控制台创建项目，创建用户表、信用额度表等（参考项目文档隐含的表结构设计）；

• 配置Row Level Security（RLS）规则，确保数据安全；

2. Stripe配置：

• 在Stripe控制台创建产品（如“100 credits”），设置价格；

• 配置Webhook，接收支付成功回调，用于更新用户信用额度；

3. NextAuth配置：

• 在Google开发者控制台创建OAuth 2.0客户端，获取Client ID和Client Secret；

• 确保NEXTAUTH_URL与本地/部署地址一致，避免登录回调失败。

5. 生产环境部署（可选）

若需将本地部署的版本发布到生产环境，可参考Next.js的部署指南，支持部署到Vercel、Netlify、AWS等平台，步骤如下：

1. 构建生产版本：

   npm run build

2. 部署到Vercel（推荐，与Next.js兼容性最佳）：

• 安装Vercel CLI：npm i -g vercel；

• 执行 vercel 命令，跟随提示完成部署，自动读取.env文件中的环境变量；

3. 访问生产环境：部署成功后，Vercel会提供一个在线地址，可通过该地址访问生产环境的Chart-GPT。

六、常见问题解答（FAQ）

1. 为什么需要PaLM API密钥（BARD_KEY）？没有密钥能使用吗？

• 解答：PaLM API是Chart-GPT的核心AI能力来源，用于解析文本输入、提取数据逻辑并生成结构化数据，没有该密钥则无法实现文本转图表功能。用户需前往Google PaLM API官方平台申请密钥（需注册Google Cloud账号，可能涉及免费额度或付费），填写到.env文件中即可使用。

2. 不配置Supabase、Stripe和NextAuth，能使用Chart-GPT吗？

• 解答：可以。Supabase、Stripe、NextAuth仅用于支持扩展功能（Google登录、信用系统、支付），核心的文本转图表、图表自定义、导出功能无需这些服务，仅需配置BARD_KEY即可正常使用。适合仅需基础功能的用户。

3. Chart-GPT支持哪些图表类型？能扩展更多类型吗？

• 解答：目前项目文档中明确支持柱状图（Bar Chart），可满足对比类、排名类数据的可视化需求。由于项目开源，开发者可通过二次开发扩展图表类型（如折线图、饼图、雷达图、散点图等），需修改components/目录下的图表组件，集成对应的可视化库（如Recharts、ApexCharts）并适配AI生成的结构化数据格式。

4. 生成的图表可以导出为哪些格式？支持矢量图吗？

• 解答：项目文档中提到“Download”功能，但未明确说明导出格式，结合同类工具推测支持PNG、JPG等图片格式。若需导出SVG矢量图（支持无限放大且不失真），可通过二次开发修改utils/目录下的导出函数，集成svg-to-image等工具实现。

5. 移动端使用时，图表显示不全或排版错乱怎么办？

• 解答：Chart-GPT已修复“mobile chart overflow（移动端图表溢出）”问题，若仍出现显示问题，可尝试以下解决方案：

• 确保使用最新版本的代码（执行git pull更新仓库）；

• 在移动端调整浏览器缩放比例，或横向查看；

• 若仍无法解决，可在GitHub Issues中提交问题，附上设备型号、浏览器版本和截图，等待社区修复。

6. 生成的图表数据来源是什么？是否准确？

• 解答：Chart-GPT的图表数据来源于AI模型（PaLM API）对用户文本输入的解析，若用户文本中明确包含数据（如“苹果份额20%、三星18%”），AI会直接提取该数据生成图表；若用户文本仅描述场景（如“2023年智能手机市场份额”），AI会基于训练数据生成参考性数据，该数据仅用于演示，不保证准确性。若需生成准确图表，建议在文本输入中明确包含具体数据。

7. 本地部署时，启动服务后提示“BARD_KEY is missing”怎么办？

• 解答：该错误表示.env文件中未配置PaLM API密钥，解决方案如下：

1. 确认已执行cp .env.example .env（Windows系统为copy .env.example .env），生成了.env文件；

2. 打开.env文件，检查是否存在BARD_KEY="your-api-key"配置项，若不存在则手动添加；

3. 将“your-api-key”替换为实际申请的PaLM API密钥，保存文件；

4. 重启开发服务器（npm run dev），即可解决该问题。

8. 信用系统如何计费？可以自定义信用额度和价格吗？

• 解答：信用系统的计费规则与价格完全可自定义，需通过Stripe配置产品价格（如10元=100 credits，1 credit可生成1次图表），并在Supabase中记录用户信用额度。具体配置步骤如下：

1. 在Stripe控制台创建产品，设置信用额度对应的价格；

2. 修改pages/api/buy-credits.tsx中的逻辑，关联Stripe产品与信用额度；

3. 在Supabase中创建用户信用表，记录用户ID、剩余credits、购买记录等；

4. 前端页面添加信用额度显示与购买入口，即可实现自定义计费。

七、相关链接

• 项目GitHub仓库：https://github.com/whoiskatrin/chart-gpt

• 官方在线演示地址：www.chartgpt.dev

八、总结

Chart-GPT是一款聚焦“文本转图表”核心需求的开源AI工具，通过PaLM API实现自然语言解析与数据结构化，基于Next.js和TypeScript构建高效前端，搭配Tailwind CSS实现响应式设计与明暗主题切换，核心功能覆盖文本输入生成图表、个性化配置、导出复用等，同时支持通过Supabase、Stripe、NextAuth扩展用户认证、信用系统与支付功能，适配个人使用、团队协作、商业化部署等多种场景。其最大优势在于“零数据准备成本”与“秒级生成”，大幅降低数据可视化门槛，让非专业用户无需掌握复杂工具即可快速制作美观图表，同时开源特性支持开发者二次开发与功能扩展，满足个性化需求。无论是职场办公、学术科研、商业分析还是教育教学，Chart-GPT都能通过高效的AI可视化能力提升工作与学习效率，是一款兼具实用性与扩展性的开源工具。