81 lines
2.1 KiB
Markdown
81 lines
2.1 KiB
Markdown
|
# Chart.js ESM 封装层 (@web/chart)
|
||
|
|
|
||
|
|
基于 **Chart.js 4.x** 的原生 ESM 封装，专为数据驱动的 UI 架构设计。支持“用户侧零打包”引入，通过 `DataChart` 类实现高性能、响应式的图表渲染。
|
||
|
|
|
||
|
|
## 1. 核心设计原则
|
||
|
|
- **原生 ESM**: 源码与产物均为标准 ESM 格式。
|
||
|
|
- **数据驱动**: 状态变更时调用 `update(data)`，严禁频繁销毁/重建实例。
|
||
|
|
- **极致性能**: 自动处理组件生命周期，内置 Chart.js 核心控制器。
|
||
|
|
|
||
|
|
## 2. 快速开始
|
||
|
|
|
||
|
|
### 2.1 引入方式
|
||
|
|
推荐通过 `importmap` 或 `loader.js` 引入：
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script type="importmap">
|
||
|
|
{
|
||
|
|
"imports": {
|
||
|
|
"@web/chart": "https://cdn.example.com/chart/dist/chart.js"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 2.2 基础用法
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
import { DataChart } from '@web/chart'
|
||
|
|
|
||
|
|
const canvas = document.getElementById('myChart')
|
||
|
|
const chart = new DataChart(canvas, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||
|
|
datasets: [{
|
||
|
|
label: '销售额',
|
||
|
|
data: [12, 19, 3, 5]
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
// 响应式更新数据
|
||
|
|
chart.update({
|
||
|
|
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||
|
|
datasets: [{
|
||
|
|
label: '销售额',
|
||
|
|
data: [15, 25, 10, 8]
|
||
|
|
}]
|
||
|
|
})
|
||
|
|
```
|
||
|
|
|
||
|
|
## 3. API 参考
|
||
|
|
|
||
|
|
### `DataChart(canvas: HTMLCanvasElement, config: Object)`
|
||
|
|
构造函数，初始化图表。
|
||
|
|
- `config.type`: 图表类型 (`'line'`, `'bar'`, `'pie'`, `'doughnut'`)。
|
||
|
|
- `config.data`: Chart.js 标准数据格式。
|
||
|
|
- `config.options`: Chart.js 标准配置。
|
||
|
|
|
||
|
|
### `update(data?: Object)`
|
||
|
|
平滑更新图表。
|
||
|
|
- `data`: (可选) 新的数据对象。若不传，则强制触发现有数据的重绘。
|
||
|
|
|
||
|
|
### `destroy()`
|
||
|
|
销毁图表实例，释放内存。
|
||
|
|
|
||
|
|
## 4. 支持的图表类型
|
||
|
|
内置集成了以下控制器，无需额外注册：
|
||
|
|
- Line (折线图)
|
||
|
|
- Bar (柱状图)
|
||
|
|
- Pie / Doughnut (饼图/环形图)
|
||
|
|
- Tooltip & Legend 插件
|
||
|
|
|
||
|
|
## 5. 开发与测试
|
||
|
|
- **测试靶场**: `test/index.html` (支持热更新调试)
|
||
|
|
- **单元测试**: `npm run test` (基于 Playwright)
|
||
|
|
- **构建**: `npm run build` (产出 `chart.js` 与 `chart.min.js`)
|