13.1 数据仪表板

项目概述

构建一个数据仪表板应用，连接公开 API，用 Chart.js 生成可视化图表。

这个项目虽然不是每个人都做仪表板，但它覆盖了一个重要的模式——从数据源获取数据 → 在前端展示 → 用户交互过滤。这个模式适用于后台管理面板、业务报表、数据监控等大量场景。掌握它，你就能为任何数据构建可视化管理工具。

推荐技术栈

• 数据源：公开 REST API（如 JSONPlaceholder、OpenWeatherMap、GitHub Stats）
• 图表库：Chart.js v4（AI 最熟悉、文档最齐全的图表库）
• 前端框架：可选 Vue 或 React（纯 HTML + JS 也可以，取决于你想不想练习框架）
• 样式：Tailwind CSS 或纯 CSS

选择 JSONPlaceholder 作为数据源的原因：它不需要 API 密钥，没有请求频率限制，返回的数据结构清晰。适合第一个版本快速跑通。后期可以换成真实 API。

分步 Vibe 流程

第 1 步：定义数据来源

我要做一个数据仪表板，使用 JSONPlaceholder 的 /posts 和 /users 接口。
帮我分析这两个接口返回的数据结构，然后建议 3 种可视化的方式。

AI 会帮你查看 API 文档，然后给出建议。这一步的目的是让 AI 和你对齐"用什么数据、展示什么信息"。

AI 可能返回的建议：

图表类型	数据来源	展示内容
柱状图	/users	按城市统计用户数量
饼图	/posts	按用户统计文章发布数量（Top 10）
折线图	/posts	按日期统计文章发布趋势

你可以从这三个方案中选一个开始，或者自己提出新的可视化方式。你在这个阶段的决策决定了仪表板长什么样——AI 不在乎展示什么，你在乎。

第 2 步：创建项目骨架

创建一个 HTML5 仪表板项目，包含：
- 顶部导航栏，显示仪表板标题
- 左侧边栏，放置图表切换菜单
- 右侧主内容区，默认显示总览
使用 CSS Grid 布局。

AI 生成项目结构。如果对布局不满意，直接说"布局改成上下结构"或"侧边栏宽度太宽了"——即时调整。

布局的变体选择： 仪表板的布局通常有三种方式。上下结构适合展示型仪表板（大屏展示），左右结构适合管理型仪表板（频繁操作）。如果你不确定，先让 AI 生成左右结构——这是管理仪表板的标准模式。

第 3 步：接入数据并绘制第一个图表

连接 /users 接口，按城市统计用户数量，用柱状图展示。
颜色用蓝色系渐变。

AI 会：写 fetch 请求 → 转换数据格式 → 初始化 Chart.js → 绘制图表。每一步如果有错误，复制错误信息回去就行。

这是最关键的一步——你第一次看到真实数据以可视化形式出现在页面上。如果图表显示不对，不要慌张，常见的问题：

• 数据格式不对：API 返回的数据结构和 Chart.js 需要的数据结构不匹配。AI 会写转换函数。
• 图表空白：检查 API 是否真的返回了数据，在浏览器控制台输入 console.log(data) 看看。
• 颜色不对：直接说"换成暖色系"或"用 #ff6b35 这个橙色"。

第 4 步：添加交互

点击柱状图中的某个柱子，在下方显示该城市的所有用户详情列表。
点击用户行时，弹出一个模态框显示该用户的完整信息。

交互是仪表板从"静态展示"到"可探索数据"的关键升级。你不需要描述"点击柱子后怎么找到对应数据"——AI 会自动处理 Chart.js 的点击事件和数据匹配。

你可能遇到的交互问题：

• "点击柱子时没有反应"——Chart.js 的 onClick 事件需要手动绑定。AI 会添加。
• "模态框内容显示不全"——让 AI "把模态框宽度加到 600px，内容允许滚动。"
• "点击柱子后再点空白区域想关闭详情"——"点击空白区域关闭详情面板"。

第 5 步：添加过滤器

在顶部添加一个下拉筛选器，按公司名称过滤用户。
筛选后图表和数据列表同步更新。

过滤器让仪表板从"一张图"变成"可交互的数据探索工具"。你的角色是定义"按什么过滤"，AI 负责让图表和数据同时响应。

扩展方向

完成基础版本后，你可以添加更多功能：

方向一：添加更多图表。

增加第二张图表——按用户统计文章数量，用水平条形图展示。
两张图表并排显示。

方向二：添加时间轴。

如果数据包含时间字段，添加一个日期范围选择器。
选中某个日期范围后，所有图表只显示该范围内的数据。

方向三：数据导出。

添加导出功能：点击"导出 CSV"按钮，将当前筛选后的数据下载为 CSV 文件。

关键决策点

决策点	可选方案	AI 的建议倾向
数据获取方式	Fetch API / Axios	简单项目用 Fetch 即可，无需引入额外依赖
图表类型	柱状图/折线图/饼图/散点图	根据数据性质选择：分类数据用柱状图，占比用饼图
状态管理	全局变量 / 框架状态	纯 JS 用全局变量，框架用响应式状态
样式方案	Tailwind / 纯 CSS	Tailwind 在迭代频繁的仪表板中效率更高
API 鉴权	无 / API Key / OAuth	先做无需鉴权的 API，后期再加认证
刷新策略	手动刷新 / 定时刷新 / WebSocket	静态数据手动刷新，实时数据定时刷新

常见问题与 AI 修复

问题 1：跨域请求被阻止。

如果在浏览器中直接使用某个 API，可能会遇到 CORS 错误。告诉 AI：

"获取 API 数据时遇到 CORS 错误，怎么处理？"

AI 可能会建议：

• 使用支持 CORS 的 API（JSONPlaceholder 默认支持）
• 或创建一个简单的 proxy 服务器（如果用 Next.js，使用 API Routes 做代理）
• 或安装浏览器 CORS 插件（仅开发环境用）

问题 2：图表在部分数据下显示异常。

"当某个分类的数据为 0 时，图表对应的位置显示空白。是否应该隐藏这个分类？"

AI 会添加数据过滤逻辑，过滤掉值为 0 的分类。

问题 3：加载速度慢。

"数据量增加到 1000 条后，图表渲染变慢了。怎么优化？"

AI 会建议：

• 在服务端聚合数据（减少传输量）
• 使用 Chart.js 的 decimation 插件（数据降采样）
• 分页加载（一次只显示前 100 条，用户滚动时加载更多）

你：帮我加一个 loading 状态，数据加载时显示一个简单的旋转加载器。

AI：在 HTML 中添加了加载器元素，在 JS 中通过 fetch 请求的生命周期控制显示/隐藏。

你：图表在移动端显示不全，帮我做一个响应式处理。

AI：添加了 Chart.js 的 responsive: true 配置，并调整了容器的最小高度。同时添加了窗口 resize 监听。

你：切换菜单项时，图表不是切换而是重叠显示了。

AI：在切换图表前添加了 chart.destroy() 调用，确保旧图表被销毁后再创建新图表。

你：折线图的 X 轴标签重叠了。

AI：调整了 ticks 配置，设置了 maxTicksLimit 和 autoSkip，同时将标签旋转了 45 度。