{"_id":"@apigo.cc/chart","_rev":"3-87a291a1b8ae2099f0c8a4e1256e7841","name":"@apigo.cc/chart","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@apigo.cc/chart","version":"1.0.0","_id":"@apigo.cc/chart@1.0.0","maintainers":[{"name":"star3s","email":"isstar3@126.com"}],"dist":{"shasum":"74aaa5a511e321acc02281695a94e78434886c05","tarball":"https://registry.npmjs.org/@apigo.cc/chart/-/chart-1.0.0.tgz","fileCount":4,"integrity":"sha512-oKTKmbC6JfcxsQBk+pi2iIjrHNdf4ZpiAc5QQku2Ixl42rdFfMdpZlmNXRnSsO+0pFjUVLPoiedRzItGVVnuog==","signatures":[{"sig":"MEUCIDCqJScolLx6pF+fgMDzBOT0c2mLNKJfpyRbHVtyPtgQAiEAyz2v7iPKlw/T+uHUc/ydWzraeByRPL8vS3tKMvQtZYQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":549121},"main":"dist/chart.js","type":"module","module":"dist/chart.js","gitHead":"3e5b41792bc802e36941987f184c4153d0f774f8","scripts":{"dev":"vite","pub":"node scripts/publish.js","test":"playwright test","build":"vite build"},"_npmUser":{"name":"star3s","email":"isstar3@126.com"},"_npmVersion":"10.7.0","description":"基于 **Chart.js 4.x** 的原生 ESM 封装，专为数据驱动的 UI 架构设计。支持“用户侧零打包”引入，通过 `DataChart` 类实现高性能、响应式的图表渲染。","directories":{},"_nodeVersion":"20.15.0","dependencies":{"chart.js":"^4.4.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","terser":"^5.47.1","@playwright/test":"^1.40.0","@rollup/plugin-terser":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chart_1.0.0_1780404889961_0.4866749250208484","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@apigo.cc/chart","version":"1.0.1","_id":"@apigo.cc/chart@1.0.1","maintainers":[{"name":"star3s","email":"isstar3@126.com"}],"dist":{"shasum":"7070bee9c65e15923939c972c855984162496a9d","tarball":"https://registry.npmjs.org/@apigo.cc/chart/-/chart-1.0.1.tgz","fileCount":4,"integrity":"sha512-NjqyWxibMbb3ZDfidpWEyMq7NZhj2oqOrsyiYtsHkBytRHa5BrWNwlk3wUUChxFA6jwAG/9g8ay7kdEkNcu+og==","signatures":[{"sig":"MEUCICbR7DNURZGj/vvgRWt6PDYfMcNi66zgvn03OyjiLALiAiEA28GUifG5hz578DOiaURIgum6LVuDmX/6HaEWs4W/HRE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":549136},"main":"dist/chart.js","type":"module","module":"dist/chart.js","gitHead":"e43d131479be8431c4aa290aad37bdadcfc66bd4","scripts":{"dev":"vite","pub":"node scripts/publish.js","test":"playwright test","build":"vite build"},"_npmUser":{"name":"star3s","email":"isstar3@126.com"},"_npmVersion":"10.7.0","description":"基于 **Chart.js 4.x** 的原生 ESM 封装，专为数据驱动的 UI 架构设计。支持“用户侧零打包”引入，通过 `DataChart` 类实现高性能、响应式的图表渲染。","directories":{},"_nodeVersion":"20.15.0","dependencies":{"chart.js":"^4.4.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","terser":"^5.47.1","@playwright/test":"^1.40.0","@rollup/plugin-terser":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/chart_1.0.1_1780572428970_0.09003617118307705","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@apigo.cc/chart","version":"1.0.2","type":"module","main":"dist/chart.js","scripts":{"dev":"vite","build":"vite build","test":"playwright test","pub":"node scripts/publish.js"},"devDependencies":{"@playwright/test":"^1.40.0","@rollup/plugin-terser":"^1.0.0","terser":"^5.47.1","vite":"^5.0.0"},"dependencies":{"chart.js":"^4.4.0"},"_id":"@apigo.cc/chart@1.0.2","gitHead":"2cc9063af45865463ce8e23d65f8eb58832ce297","description":"基于 Chart.js 4.x 的轻量级图表封装库。内置数据映射（Data Mapping）功能。","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-/OfxYJmqbDDVg0X4hIV8sJqJkXNMcIU8XdNHn+fL9TbhqvxElOjch6ZupAO5VYllnMnnUEC/PtXc0RWImeYsOw==","shasum":"d80020a73ba6cfc9c6f1c63a0137c637486b00dd","tarball":"https://registry.npmjs.org/@apigo.cc/chart/-/chart-1.0.2.tgz","fileCount":4,"unpackedSize":575177,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIHS5o5XzI7sonmZzmZ3fg8AQWQSLEW1KP+bK7OjnSj/ZAiEAmzgi/B3FuHs3W86O9uC23vMRbP5o90utYDgy1MU8tNI="}]},"_npmUser":{"name":"star3s","email":"isstar3@126.com"},"directories":{},"maintainers":[{"name":"star3s","email":"isstar3@126.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/chart_1.0.2_1782127546998_0.11229544278817172"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-02T12:54:49.785Z","modified":"2026-06-22T11:25:47.317Z","1.0.0":"2026-06-02T12:54:50.158Z","1.0.1":"2026-06-04T11:27:09.128Z","1.0.2":"2026-06-22T11:25:47.207Z"},"description":"基于 Chart.js 4.x 的轻量级图表封装库。内置数据映射（Data Mapping）功能。","maintainers":[{"name":"star3s","email":"isstar3@126.com"}],"readme":"# @apigo.cc/chart API 手册\n\n基于 Chart.js 4.x 的轻量级图表封装库。内置数据映射（Data Mapping）功能。\n\n---\n\n## 1. 引入方式 (UMD 优先)\n\n在 HTML 中引入脚本即可，组件已内置 Chart.js，无需额外依赖。\n\n```html\n<script src=\"https://cdn.jsdelivr.net/npm/@apigo.cc/chart@1.0.1/dist/chart.min.js\"></script>\n\n<script>\n    // 直接使用全局 DataChart 类\n    const chart = new DataChart(myCanvas, config);\n</script>\n```\n\n> **ESM 模式说明**：如需在模块化环境中使用，引入 `dist/chart.min.mjs`。\n\n---\n\n## 2. 基本用法\n\n### 组件化用法 (推荐)\n直接在 HTML 中使用 `<DataChart>` 标签，通过 `state` 进行数据绑定。\n\n```html\n<div $data=\"{ \n    myData: [{ month: 'Jan', sales: 120 }, { month: 'Feb', sales: 190 }],\n    myMap: { labels: 'month', values: 'sales', label: '月销量' }\n}\">\n    <DataChart type=\"bar\" $.state.data=\"myData\" $.state.map=\"myMap\" style=\"height:300px\"></DataChart>\n</div>\n```\n\n### JS 调用方式 (兼容)\n```html\n<canvas id=\"myCanvas\" width=\"400\" height=\"200\"></canvas>\n...\n---\n\n## 3. API 参考\n\n### `new DataChart(canvas, config)`\n- **`canvas`**: HTMLCanvasElement。\n- **`config.type`**: `'line'`, `'bar'`, `'pie'`。\n- **`config.data`**: 原始对象数组。\n- **`config.map`**: 映射规则。\n- **`config.options`**: 透传给底层 Chart.js 的原生配置。\n\n### 实例方法\n- **`update(newData)`**: 传入新数组重绘图表。\n- **`destroy()`**: 销毁实例。\n\n---\n\n## 开发者提示 (AI 必读)\n1. **尺寸控制**: Canvas 必须具有明确的高度和宽度。\n2. **全局变量**: UMD 模式下，`DataChart` 类自动挂载到 `window`。\n","readmeFilename":"README.md"}