📖 API 文档

图表生成器通过 URL 查询参数控制图表渲染。不需要任何认证，纯前端渲染。适合嵌入 iframe、Notion、飞书文档或直接分享链接。

在线: chart.html 📦 依赖: Chart.js 4 🔗 CORS: 全开放

🚀 快速开始

最基本的用法：选择一个图表类型，直接打开链接。

https://dashboard-stat.pages.dev/chart?type=trend

→ 打开示例

📍 基础 URL #

https://dashboard-stat.pages.dev/chart?参数1=值1&参数2=值2...

仅一个 HTML 页面，所有逻辑在浏览器端执行。支持 HTTP/HTTPS，无跨域限制。

📋 通用参数 #

以下参数适用于所有图表类型。

参数	类型	默认值	说明
`type`必填	`string`	`trend`	图表类型。`trend` \| `doughnut` \| `bar` \| `radar` \| `polar` \| `stream`
`title`	`string`	—	图表标题，显示在图表上方。需 URL 编码中文。
`hideTitle`	`bool`	`false`	设为 `true` 隐藏标题（适合极简嵌入）。
`theme`	`string`	`dark`	主题模式。`dark` 或 `light`
`bg`	`string`	`transparent`	背景色 CSS 值，例如 `%23ffffff`（URL编码）或 `transparent`。
`height`	`number`	`300`	图表高度（px），范围 100–800。
`legend`	`bool`	`true`	是否显示图例。设为 `false` 隐藏。
`labels`	`string`	按类型	数据标签，逗号分隔（`A,B,C`）。
`values`	`string`	按类型	数值，逗号分隔（`10,20,30`）。不同类型含义不同。
`values2`	`string`	—	第二组数值（仅 `trend` 和 `radar` 支持）。
`color1`	`hex`	`#3b82f6`	主配色（不带 `#`，如 `3b82f6`）。
`color2`	`hex`	`#22c55e`	副配色（用于第二组数据）。

🎯 各类型参数详解 #

📈

trend — 趋势图

折线图 / 面积图 / 柱状图可切换。支持两组数据对比。

参数	类型	默认值	说明
`mode`	`string`	`area`	显示模式：`area` 面积 \| `line` 折线 \| `bar` 柱状
`label1`	`string`	`数据A`	第一组数据图例名
`label2`	`string`	`数据B`	第二组数据图例名

📝 示例

/chart?type=trend&mode=area&title=流量趋势&labels=周一,周二,周三,周四,周五&values1=1200,1900,1500,2100,1800&values2=800,1100,900,1300,1100&color1=3b82f6&color2=22c55e&label1=访问量&label2=用户数

🔗 查看效果 →

🍩

doughnut — 环形图

占比分布，hover 显示百分比。

参数	类型	默认值	说明
`labels`	`string`	默认5项	分类名称，逗号分隔
`values`	`string`	默认5项	每项数值，逗号分隔
`colors`	`string`	自动10色	自定义颜色，逗号分隔的 hex，如 `3b82f6,22c55e,a855f7`

📝 示例

/chart?type=doughnut&title=流量来源&labels=直接,搜索,社交,邮件,广告&values=35,25,18,10,8

🔗 查看效果 →

📊

bar — 横向柱状图

横向条形图，适合排名对比。

参数	类型	默认值	说明
`labels`	`string`	默认5项	分类名称
`values`	`string`	默认5项	每项数值
`colors`	`string`	自动多色	自定义颜色列表（逗号分隔 hex）

📝 示例

/chart?type=bar&title=各渠道收入&labels=电商,SaaS,广告,咨询,内容&values=128000,96000,52000,34000,18460

🔗 查看效果 →

🎯

radar — 雷达图

多维指标对比。支持两组数据叠加。

参数	类型	默认值	说明
`labels`	`string`	默认5项	维度名称
`values`	`string`	默认5项	第一组数据
`values2`	`string`	—	第二组数据（虚线显示），用于对比

📝 示例

/chart?type=radar&title=满意度&labels=体验,响应,功能,性能,美观&values=92,78,85,70,88&values2=85,72,80,65,82&label1=本月&label2=上月

🔗 查看效果 →

🎨

polar — 极地区域图

极坐标下的面积图，适合展示多维占比。

参数	类型	默认值	说明
`labels`	`string`	默认5项	分类名称
`values`	`string`	默认5项	每项数值
`colors`	`string`	自动多色	自定义颜色列表

📝 示例

/chart?type=polar&title=分布&labels=电商,社交,搜索,邮件,广告&values=35,25,20,12,8

🔗 查看效果 →

⚡

stream — 实时数据流

自动更新的模拟实时折线图。无需数据参数。

参数	类型	默认值	说明
`color1`	`hex`	`3b82f6`	折线颜色
数据自动生成，无需额外参数。每 1.2 秒更新一次。

📝 示例

/chart?type=stream&title=实时数据&color1=3b82f6

🔗 查看效果 →

🔌 嵌入方式 #

🌐 HTML / iframe

<iframe
  src="https://dashboard-stat.pages.dev/chart?type=trend&mode=area&title=My%20Chart"
  width="100%"
  height="400"
  frameborder="0"
  allow="fullscreen"
></iframe>

📌 自定义尺寸和背景

<iframe
  src="https://dashboard-stat.pages.dev/chart?type=doughnut&theme=light&bg=%23ffffff&height=350"
  width="500"
  height="350"
  frameborder="0"
></iframe>

📝 Markdown / Notion / 飞书

Notion 和飞书都支持嵌入外部链接，直接粘贴图表链接即可。

Notion 嵌入块:

/embed → 粘贴 https://dashboard-stat.pages.dev/chart?type=bar

飞书文档嵌入:

@嵌入 → 粘贴 https://dashboard-stat.pages.dev/chart?type=radar

💡 技巧与注意事项 #

1. URL编码：中文和非 ASCII 字符需要 URL 编码（如 %E6%B5%8B%E8%AF%95）。浏览器会自动编码，手动输入时注意。

2. 颜色值：十六进制颜色去掉 #，如 3b82f6。

3. 透明背景：默认背景透明，适合嵌入深色/浅色页面。通过 bg 参数可指定背景色。

4. 组合使用：同一页面嵌入多个图表只需多个 iframe，各自独立渲染。

5. 性能友好：单文件不到 16KB（gzip），Chart.js 走 CDN 缓存。无后端请求，不消耗服务器资源。

📦 更新日志 #

v1.0

首个版本

6种图表类型 · URL参数驱动 · 可嵌入 · 实时数据流 · 深色/浅色主题 · CSV 导出 · 响应式

图表生成器 · 纯前端 · Chart.js 4 · Cloudflare Pages