Interactive Dashboard Builder 是一个用于构建自包含交互式 HTML/JS 仪表板的技能，核心依赖 Chart.js 及其日期适配器，通过 CDN 引入。它面向需要快速产出可交互数据看板的场景，提供从页面结构、图表封装到筛选联动、表格排序和样式系统的成套模式与代码片段。
用途 该技能用于创建仪表板、构建交互式数据可视化。它强调“自包含”：数据直接嵌入页面脚本中，图表、筛选器、表格与样式都在同一个 HTML 文件内完成，无需额外后端或构建流程。
主要能力
- 基础模板：给出完整的 HTML 结构，包含头部标题与筛选区、KPI 行、图表行、表格区和页脚（显示数据日期）。页面通过 CDN 加载 chart.js@4.5.1 与 chartjs-adapter-date-fns@3.0.0，并带有 integrity 与 crossorigin 属性。
- KPI 卡片：提供 KPI 卡片 HTML 模式与 renderKPI 函数，可按 currency、percent、number 等格式显示数值，并计算与上一周期相比的百分比变化，用 positive/negative 类区分涨跌。formatValue 函数支持百万（M）、千（K）缩写与本地化数字格式。
- 图表封装：提供 createLineChart、createBarChart、createDoughnutChart 三个函数，分别生成折线图、柱状图（支持横向，标签超过 8 个时自动横向）和环形图（cutout 60%）。折线图支持多数据集、填充、平滑曲线、悬停点放大与自定义 tooltip；柱状图支持自定义颜色与数值格式；环形图在 tooltip 中显示占比。
- 图表更新：updateChart 函数可在筛选变化时更新标签与数据，支持单数据集与多数据集，并使用 chart.update('none') 关闭动画实现即时刷新。
- 筛选与交互：提供下拉筛选器（populateFilter 自动填充唯一值并保留“All”选项、getFilterValue 读取值）、日期范围筛选（filterByDateRange）以及组合筛选逻辑 applyFilters，可同时按地区、类别、起止日期过滤，并联动刷新 KPI、图表和表格。
- 可排序表格：renderTable 函数生成带表头点击排序的数据表格，点击表头切换升序/降序并显示箭头，支持按列格式化数值。
- CSS 样式系统：定义 :root 变量，包括背景层（--bg-primary、--bg-card、--bg-header）、文本色、6 种数据强调色、状态色（positive/negative/neutral）以及间距与圆角。布局使用 grid 实现 KPI 行与图表行的自适应排列，图表容器限制 canvas 最大高度 300px，筛选区使用 flex 换行布局。
使用方式 按照模板结构编写 HTML，在 script 中定义 DATA 数组，实例化 Dashboard 类（new Dashboard(DATA)），类内部依次调用 setupFilters、renderKPIs、renderCharts、renderTable。筛选控件通过 onchange 调用 dashboard.applyFilters()。图表通过 canvas 的 id 与封装函数创建，更新时调用 updateChart。表格通过 renderTable(containerId, data, columns) 渲染，列定义包含 field、label 与可选 format。
适用场景 适合需要单文件交付、可离线打开或直接嵌入页面的数据看板，例如业务指标概览、销售趋势、分类占比展示等。由于数据内嵌，适合数据量适中、无需实时后端查询的展示型仪表板。
限制 资料未提供关于浏览器兼容性、性能上限、数据量规模、无障碍支持、导出功能、主题切换或后端集成的说明，暂未提供。图表类型仅涵盖折线图、柱状图与环形图，其他图表类型暂未提供。