data/*.json
读取，替换 JSON 即可复用到你自己的项目。
r111/
├── index.html 数据看板首页
├── gallery.html 图表库总览
├── line.html 折线 / 曲线 / 阶梯
├── area.html 面积 / 堆叠 / 百分比
├── bar.html 柱状 / 条形 / 堆叠
├── pie.html 饼图 / 环形 / 玫瑰
├── scatter.html 散点 / 气泡
├── radar.html 雷达 / 仪表盘
├── funnel.html 漏斗 / 日历热力
├── data.html 数据源浏览
├── about.html 使用文档
├── chart.js SVG 图表引擎
├── app.js 公共运行时 / 数据加载
├── style.css 全站样式
└── data/
├── index.json 数据集索引
├── sales.json 月度销售额
├── visits.json 一周访问量
├── ... 共 10 份数据
└── fallback.js 离线兜底副本
在页面底部依次引入 chart.js 与 app.js，前者提供 CH 命名空间，后者提供 DS 数据加载器。
按 数据源页 中的 5 种结构任选其一，放到 data/ 目录并在 index.json 登记。
拿到数据后调用对应绘制函数，容器宽度自适应，无需指定尺寸。
DS.get('sales').then(function (d) {
CH.line(document.getElementById('box'), {
cats: d.cats,
series: d.series,
mode: 'smooth', // line | smooth | step
area: true,
unit: d.unit,
h: 240
});
});
| 方法 | 关键参数 | 用途 |
|---|---|---|
CH.line | cats / series / mode / area / stack / percent | 折线 曲线 阶梯 面积 |
CH.bar | cats / series / stack / horizontal | 柱状 条形 堆叠 |
CH.pie | items / inner / rose | 饼图 环形 玫瑰 |
CH.scatter | series / bubble / xName / yName | 散点 气泡 |
CH.radar | indicators / series | 多维能力对比 |
CH.gauge | value / max / color | 单指标达成率 |
CH.funnel | items | 转化漏斗 |
CH.heat | values / weeks / days / start | 日历热力 |
CH.mini | kind / color | 卡片缩略图 |
CH.legend | series / onToggle | 可点击图例 |
file:// 协议下浏览器会拦截 fetch，本项目已自动回落 data/fallback.js。若仍空白，请用任意静态服务器打开，例如 python -m http.server。
保持 JSON 字段结构不变，替换 data/ 下同名文件即可，页面无需改动一行代码。
可以。修改 app.js 中 DS.get 的 url 拼接规则，指向你的 API 即可，返回体保持同样结构。
iOS Safari 11+ / Android Chrome 60+ / 微信内置浏览器，均已实测通过。
本源码由驰旭教育整理发布，仅供学习交流与二次开发参考使用。可自由用于个人项目与商业项目，但请勿直接转售源码本身。