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 引入：

<script type="importmap">
{
  "imports": {
    "@web/chart": "https://cdn.example.com/chart/dist/chart.js"
  }
}
</script>

2.2 基础用法

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)