HTML无原生图表组件，模块化图表需用JS库（如Chart.js）封装逻辑，HTML仅作占位；须避免手动CSS绘图，应通过Canvas实例管理生命周期，并从语义化表格提取清洗数据实现真模块化。

HTML本身不提供图表组件，必须靠JS库注入能力

纯

或不是“可视化组件”，它们只是容器。所谓“模块化图表”，本质是把图表逻辑封装成可复用的 JS 单元，HTML 只负责占位和传参。强行用 CSS 画柱子、用 span 模拟折线，后期改数据就得手动调 style，根本谈不上模块化。

Chart.js 的 Chart 实例就是最轻量的模块化单元

它不依赖框架，每个图表都是独立实例，可封装为函数或类：

• new Chart(ctx, { type: 'line', data: ..., options: ... }) 返回的对象自带 .update()、.destroy()、.resize() 方法，天然支持生命周期管理
• 把配置抽成函数，比如 createBarChart(containerId, data)，就能在多个页面复用同一套初始化逻辑
• 注意：同一个 不能重复初始化 —— 第二次调 new Chart() 会报 "Canvas is already in use" 错误，必须先调 chartInstance.destroy()
• 响应式默认开启，但若父容器宽高为 0（比如 display: none 时），图表会塌缩；建议外层加

  从 HTML 表格提取数据并喂给图表，才是真模块化起点

  别再手写 JSON 数据。直接读取语义化

，能保证数据源与展示一致：

• 用 document.querySelector('table').rows 遍历行，row.cells 提取单元格文本，自动跳过

或

第一行通常为 label，后续每行为 dataset —— 这种结构天然匹配 Chart.js 的 labels / datasets 格式

数值需显式转换：parseFloat(cell.textContent)，否则图表会把数字当字符串渲染（比如柱高变成 "1200px"）

表格带单位（如 "¥1,200"）或空值时，必须清洗：用正则 .replace(/[^-\d.]/g, '') 或 || 0 fallback

动态更新图表比重绘更省资源，但容易漏掉关键步骤

模块化不只是“一次画完”，更要支持运行时数据流：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 调 chartInstance.data.labels = newLabels + chartInstance.data.datasets[0].data = newData 后，必须跟 chartInstance.update('active') 才生效
• 用 update('active') 比 update() 更快 —— 它跳过动画重绘，适合高频刷新（如每秒更新的监控图表）
• 如果数据来自 API，别在 fetch().then() 里直接调 update()：确保 chartInstance 已存在，且 DOM 未被移除（否则报 "Canvas is not attached to document"）
• 销毁旧实例前，记得清空事件监听器（如 chartInstance.canvas.removeEventListener），否则可能内存泄漏

真正模块化的难点不在封装形式，而在数据流边界是否清晰——比如表格变更后，该由谁触发图表更新？是监听 DOM 变化，还是由业务逻辑主动通知？这个耦合点一旦模糊，模块就只剩壳子。