模块 5

可视化图表工具

数据→图表自动生成 · AI 推荐图表类型 · 一键生成仪表板

📖 场景:你需要把季度销售数据转换成可视化仪表板

背景:季度汇报在即,需要把 Excel 中的销售数据转换成直观的图表和仪表板。 包含趋势图、对比图、占比图等多种图表类型。

挑战:手动创建图表需要逐个选择数据、调整样式、排版布局,耗时 3-4 小时。

目标:用 AI 生成工具,自动识别数据并推荐图表类型,一键生成完整仪表板,30 分钟完成。

🤖 第 1 步:用 AI 生成工具

复制下面的提示词,发送给 AI(ChatGPT/Claude/通义千问等),AI 会生成一个完整的 HTML 工具:

你是一个前端开发专家,擅长用纯 HTML+JS 处理 Excel 文件和生成图表。

请帮我写一个 Excel 图表生成工具,需求如下:

【输入】
- 1 个 Excel 文件,包含任意销售数据(不要限定列名)
- 工具应该自动识别列类型(日期/分类/数值)

【处理逻辑】
1. 用户上传 Excel 文件
2. 自动识别列类型:
   - 包含"日期"/"Date"的列 → 日期列
   - 数值类型的列 → 数值列
   - 文本类型的列 → 分类列
3. 根据识别结果推荐图表类型:
   - 有日期列 + 数值列 → 折线图(趋势)
   - 有分类列 + 数值列 → 柱状图(对比)、饼图(占比)
4. 生成数据汇总和图表说明
5. 提供下载功能

【输出】
- 1 个 Excel 文件
- Sheet1(原始数据)
- Sheet2(汇总分析):按分类汇总数据
- Sheet3(图表说明):推荐图表类型和用途

【要求】
- 纯 HTML 文件,双击浏览器打开就能用
- 数据在本地处理
- 使用 SheetJS 库
- 不要限定列名,自动识别
- 界面美观
- 代码要有详细注释

请生成完整的 HTML 代码。

💡 提示:把 AI 生成的代码保存为 .html 文件,双击浏览器打开即可使用。

📁 第 2 步:上传 Excel 数据

📤
点击选择文件或拖拽到此处
支持格式:.xlsx, .xls, .csv

📊 第 3 步:选择图表类型

✅ 图表生成完成!

🤖 1. 如何用 AI 生成这个工具?

你是一个前端开发专家,擅长用纯 HTML+JS 处理 Excel 文件和生成图表。 请帮我写一个 Excel 图表生成工具,需求如下: 【输入】 - 1 个 Excel 文件,包含销售数据 - 列名:销售日期、区域、产品类别、销售额、销售量 【处理逻辑】 1. 用户上传 Excel 文件 2. 自动分析数据,识别数值列和分类列 3. 推荐合适的图表类型: - 趋势数据 → 折线图 - 对比数据 → 柱状图 - 占比数据 → 饼图 4. 生成汇总数据和图表说明 5. 提供下载功能 【输出】 - 1 个 Excel 文件 - Sheet1(原始数据) - Sheet2(汇总分析) - Sheet3(图表说明) 【要求】 - 纯 HTML 文件,双击浏览器打开就能用 - 数据在本地处理 - 使用 SheetJS 库 - 界面美观,有图表类型选择 - 代码要有详细注释 请生成完整的 HTML 代码。

🤖 2. 如何用 AI 修改这个工具?

如果你想调整工具的功能,用大白话描述需求,让 AI 帮你改:

我有一个 Excel 图表生成工具,现在想调整功能。 当前功能: - 上传 Excel 文件 - 自动识别数据类型(日期、分类、数值) - 生成汇总数据和图表说明 - 可以选择生成折线图、柱状图、饼图等 我想改成: 1. 加更多图表类型(面积图、散点图、雷达图等) 2. 根据数据自动推荐最合适的图表类型(比如有日期就推荐折线图) 3. 支持自定义颜色主题(比如用公司品牌色) 4. 在一个 Sheet 里生成多个图表,方便对比 5. 自动添加图表标题和坐标轴标签 请帮我修改工具代码,保持其他功能不变。
💡 小提示:
不需要懂代码,用大白话描述需求就行。AI 会理解并修改代码。