build-dashboard · 把数据做成可交互的 HTML 看板

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

数据：自然 2 单、广告 3 单、自然 1 单；指标=订单数求和；日期为示例快照。

输出

编辑示例 · 未运行

<select id="channel"><option>全部</option><option>自然</option><option>广告</option></select>
<p>订单数：<strong id="total"></strong></p>

const rows = [{channel:'自然',orders:2},{channel:'广告',orders:3},{channel:'自然',orders:1}];
const select = document.querySelector('#channel');
function render(){
 const view=rows.filter(r=>select.value==='全部'||r.channel===select.value);
 document.querySelector('#total').textContent=view.reduce((s,r)=>s+r.orders,0);
}
select.addEventListener('change',render); render();

将已有数据组织成指标、图表和筛选器，便于用浏览器查看和分享。

具体任务

把查询结果变成可筛选看板：围绕读者的决策排 KPI、趋势和明细表，生成浏览器可打开的 HTML。

让筛选影响所有相关图表：保持卡片、图表与表格使用同一过滤数据，注明统计周期。

必需材料

CSV 或查询结果及字段说明

指标口径和目标读者

可选材料

筛选需求

品牌样式与离线要求

使用门槛

原始数据已获准用于该看板，明确文件可能被分享给谁。

这个 Skill 额外提供的方法

从口径到交互一起交付，避免筛选图变了而 KPI 仍显示总量。

编辑示例（未运行）

制作按渠道切换的订单快照

任务：用三行示例数据展示筛选驱动的统计。

输入：
数据：自然 2 单、广告 3 单、自然 1 单；指标=订单数求和；日期为示例快照。

结果片段：
```html
<select id="channel"><option>全部</option><option>自然</option><option>广告</option></select>
<p>订单数：<strong id="total"></strong></p>
```

```javascript
const rows = [{channel:'自然',orders:2},{channel:'广告',orders:3},{channel:'自然',orders:1}];
const select = document.querySelector('#channel');
function render(){
 const view=rows.filter(r=>select.value==='全部'||r.channel===select.value);
 document.querySelector('#total').textContent=view.reduce((s,r)=>s+r.orders,0);
}
select.addEventListener('change',render); render();
```

HTML 主体与 JavaScript 脚本分别展示筛选控件和联动统计逻辑；接入页面时需将脚本文件载入。示例不含生产数据，也未运行渲染。

首次任务

把【数据/字段说明】做成供【读者】使用的 HTML 看板，指标【口径】；验收：筛选联动全部指标、显示时间范围、无未授权明细、浏览器实际检查。
必需材料：CSV 或查询结果及字段说明：【请填写或粘贴】；指标口径和目标读者：【请填写或粘贴】

验收方法

汇总值是否可用原表独立复算

筛选是否一致作用于所有相关视图

窄屏、空结果与离线条件是否按需求检查

依赖与准备

可写 HTML 文件的宿主与浏览器；上游示例可用 Chart.js，是否依赖 CDN 应按交付要求决定。

使用边界

嵌入 HTML 的数据可被查看，不应放入未获准共享的明细。

单文件看板不等于实时监控；外部图表库可能需要网络。

排错

数据很多导致页面迟缓：在导出前按实际维度聚合，限制明细行数。

离线打开只有空白图：检查 CDN 依赖，按需求打包本地资源或改用无需外部库的图。

固定来源

https://github.com/anthropics/knowledge-work-plugins/blob/da38ec1ee89d41e5380e652a97382695003396e7/data/skills/build-dashboard/SKILL.md

先看看示例

输入

输出

方法说明