我是怎么用 API + AI 三步搞定数据分析网页的

不用懂算法，不用自己写爬虫，把数据”喂”给 AI，让它帮你分析、帮你画页面——我把整个流程拆开讲

去年有个需求：把某平台的销售数据拉下来，做成一张每周能看的分析图表。
以前我会老老实实用 Excel，手动导出、手动画图，一通操作下来半天没了。后来我发现，其实整件事可以分成三步，而且每一步 AI 都能帮你干大头。

我把这套思路写出来，你可以直接拿去套用，不管是分析电商数据、天气数据，还是自己公司内部的 API，思路都一样。

🔴 先搞清楚整体流程

整件事分三块：拉数据 → 让 AI 分析 → 生成网页。
你可以把它想象成一条流水线：数据是原材料，AI 是工厂，网页是成品。每个环节都有现成的工具，你要做的只是把它们连起来。

数据是原材料，AI 是工厂，网页是成品。
你要做的只是把它们连起来。

🔴 第一步：从 API 拉数据

STEP 01 · 获取数据 | 用 fetch 把 API 数据取回来

大多数平台都提供公开 API，你拿到一个 URL，发一个请求，数据就回来了。下面是最基础的写法：

// 以免费天气 API 为例，换成你自己的 API
async function fetchData() {
const url = “https://api.open-meteo.com/v1/forecast?latitude=31.23&longitude=121.47&daily=temperature_2m_max&timezone=Asia%2FShanghai”;
const res = await fetch(url);
const data = await res.json();
return data;
}

调用这个函数，你就能拿到一个 JSON 对象。把它打印出来看看长什么样，这是后面所有事情的基础。

💡 小提示：
如果你的 API 需要 Key，记得放在请求头（Header）里，别直接拼在 URL 上泄露出去。国内常用的有聚合数据、天行数据，都有免费额度够练手。

🔴 第二步：把数据”喂”给 AI 分析

STEP 02 · AI 分析 | 把原始数据丢进 Prompt，让 AI 帮你解读

拿到 JSON 之后，直接把它塞进发给 AI 的消息里，告诉 AI 你想知道什么。
注意：数据量大的时候，只取关键字段，别把整张表都扔过去，不然容易超出长度限制。

async function analyzeWithAI(data) {
// 只取最近 7 天的最高温，够用了
const summary = {
dates: data.daily.time.slice(0,7),
maxTemp: data.daily.temperature_2m_max.slice(0,7)
};

const prompt = `
这是上海未来 7 天的最高气温数据：
${JSON.stringify(summary, null, 2)}

请帮我：

1. 用一两句话说明温度趋势
2. 指出哪天最热、哪天最凉
3. 给出穿衣建议

用口语化的中文回答，不要用列表格式。
`;

const res = await fetch(“https://api.anthropic.com/v1/messages”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
“x-api-key”: “你的API_KEY”,
“anthropic-version”: “2023-06-01”
},
body: JSON.stringify({
model: “claude-sonnet-4-20250501”,
max_tokens: 1000,
messages: [{ role: “user”, content: prompt }]
})
});

const result = await res.json();
return result.content[0].text;
}

AI 回来的是一段纯文字，你可以直接展示，也可以继续处理。

🔴 第三步：让 AI 帮你生成网页

STEP 03 · 生成网页 | 把数据 + 分析结果，渲染成一张好看的图表页

这一步有两个思路：

– 思路A：直接用 JavaScript 在浏览器里画图，推荐用 Chart.js，几行代码搞定柱状图或折线图。
– 思路B：让 AI 帮你生成完整的 HTML 代码，你直接复制粘贴就能用。

// 思路 A：用 Chart.js 自己画
function renderChart(dates, temps, analysisText) {
// 把 AI 分析结果插入页面
document.getElementById(“analysis”).innerText = analysisText;

// 用 Chart.js 画折线图
const ctx = document.getElementById(“chart”).getContext(“2d”);
new Chart(ctx, {
type: “line”,
data: {
labels: dates,
datasets: [{
label: “最高气温（°C）”,
data: temps,
borderColor: “#c0420a”,
tension: 0.4,
fill: “origin”
}]
}
});
}

最后把三个函数串起来调用，整个流程就通了：

// 主流程：串联三步
async function main() {
const data = await fetchData();
const analysis = await analyzeWithAI(data);
renderChart(
data.daily.time.slice(0,7),
data.daily.temperature_2m_max.slice(0,7),
analysis
);
}

main();

🔴 几个容易踩的坑

– 跨域问题（CORS）：浏览器直接调用第三方 API 经常会被拦截。最简单的解法是把请求挪到后端（Node.js / Python 都行），或者用平台提供的服务端 SDK。
– 数据太大别全扔给 AI：AI 模型有输入长度限制，你如果把几千行的 JSON 全扔进去，轻则截断、重则报错。提前做好数据筛选，只传关键字段。
– API Key 别写死在前端：有个坏习惯很常见，就是直接把 Key 写在 JavaScript 文件里提交到 GitHub，这样谁都能看到。要么放环境变量，要么走后端代理。

💡 进阶小技巧：
如果你想让网页实时更新，可以加一个定时器，每隔一段时间自动再跑一次 main()。这样不用手动刷新，数据始终是最新的。

🔴 做出来大概长这样
把上面的代码组合进一个 HTML 文件，打开浏览器就能看到：

– 顶部一段 AI 生成的温度趋势分析，口语化、读起来像人写的；
– 下面是一张干净的折线图，7 天数据一目了然；
– 整个页面没有任何 AI Logo、没有水印，就是普通的网页，可以直接截图发出去。

整件事加起来大概写 60 行代码，花不到半小时。以后每次看数据，刷新一下页面就好，不用再手动导出 Excel 了。

这套路的本质是：你负责”提需求”，API 负责给数据，AI 负责帮你想。
你自己只需要把它们串起来。

🔴 可以拿去套用的场景
这套流程能干的事比你想象的多。比如：

– 拉股票数据，让 AI 帮你分析近期趋势；
– 接运动手环的 API，把睡眠数据做成周报；
– 调餐厅点评平台的 API，让 AI 帮你总结评价里的高频投诉。

只要有 API，思路都是一样的，换一换数据和 Prompt 就够了。

你不需要是工程师，也不需要懂机器学习。API 给你数据，AI 帮你分析，你只是把两件工具连在一起的人——这件事，本来就这么简单。

API · AI · 数据分析 · 实战笔记
读完记得收藏，下次直接翻出来用