Agent Skills
返回列表
数据看板HTML生成器

数据看板HTML生成器

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_af163eaa/z-data-dashboard-html。

技能介绍

从静态表格到交互看板

拿到一份 CSV 或 JSON 数据，想让非技术人员直接在浏览器里筛选、搜索、看趋势——这是后端工程师和数据分析师的常见需求。手写一个可交互的前端页面并不难，但每次都从零搭轮子就很麻烦：搜索框、多列筛选、排序、图表联动，再加上"单文件、零依赖、双击即开"的约束，代码量并不小。

技能如何工作

这个技能把整条流程拆成了几个明确步骤：

  1. 数据解析：CSV 用原生 split 或预处理，JSON 直接 JSON.parse，Excel 先转 CSV
  2. HTML 结构生成：顶部工具栏（搜索框 + 列级下拉多选筛选 + 排序开关），主区左侧内联 SVG 图表，右侧或下方数据表格
  3. 联动逻辑：筛选或搜索触发 → 重算数据集 → 表格和图表同步刷新，全程纯 JS，无框架
  4. 图表实现：柱状图映射数值到 SVG 高度，折线图连接数据点，饼图用圆弧公式分段，全部内联，禁止引用外部 CDN

产物是一个自包含的 HTML 文件，CSS/JS 全部内联，双击即开，发到公网也能正常工作。

适用边界与注意点

  • 图表零外链是硬约束：内联 SVG 或 Canvas，不引 Chart.js、ECharts 等 CDN
  • 大数据量需要前端分页或虚拟滚动：超过一万行的表直接渲染会卡死
  • 派生指标需用户确认：环比、占比这类计算结果要和需求方对齐口径后再算
  • 如需公网发布：生成的 HTML 可以配合 z-html-public-deploy 技能直接部署

使用场景

  • 销售运营拿到季度销售CSV，需要一个按地区筛选、能搜索并联动柱状图的单文件网页给团队看。
  • 业务分析有一份JSON格式的用户行为数据，想生成一个带搜索、排序和图表的交互式HTML页面做周报。
  • 产品或运营把Excel导出的表格数据做成能筛选、排序且图表内联的单文件网页，直接发给需求方。

适合人员

  • 后端工程师：需要快速把数据接口返回的CSV或JSON变成可交互的网页给前端同事，避免写重复的表格筛选代码。
  • 数据分析师：要把分析结果从静态Excel表格转成浏览器里能筛选、排序、看趋势的网页，发给非技术需求方。
  • 业务运营：手里有多张导出表格，想把它们变成按列筛选、搜索的看板页面，直接发给领导审阅。