⚡

交互式数据仪表板构建技能Skill data-build-dashboard

这个技能用于构建自包含的交互式HTML仪表板，包含图表、过滤器和表格，支持专业样式，无需服务器即可直接在浏览器中运行。专注于前端开发，利用Chart.js实现数据可视化，适用于业务监控、数据分析和报告。关键词：HTML仪表板、数据可视化、前端开发、交互式设计、Chart.js、响应式布局、自包含应用。

前端开发 0 次安装 0 次浏览 更新于 3/25/2026

name: data-build-dashboard description: 构建一个带有图表、过滤器和表格的交互式HTML仪表板

构建交互式仪表板

如果您看到不熟悉的占位符或需要检查哪些工具已连接，请询问可用的集成。

构建一个自包含的交互式HTML仪表板，带有图表、过滤器、表格和专业样式。可直接在浏览器中打开——无需服务器或依赖。

使用方法

您可以要求构建一个仪表板，并附上描述（例如，“构建销售仪表板”或“创建支持票证仪表板”）。

参数

  • description — 仪表板目的和内容的描述
  • data source —（可选）要使用的数据

工作流程

1. 理解仪表板需求

确定：

  • 目的：高管概述、运营监控、深入分析、团队报告
  • 受众：谁将使用此仪表板？
  • 关键指标：哪些数字最重要？
  • 维度：用户应能通过什么进行过滤或切片？
  • 数据源：实时查询、粘贴数据、CSV文件或样本数据

2. 收集数据

如果连接了数据仓库：

  1. 查询必要数据
  2. 将结果以JSON格式嵌入HTML文件中

如果数据已粘贴或上传：

  1. 解析并清理数据
  2. 以JSON格式嵌入仪表板

如果根据描述工作而无数据：

  1. 创建一个符合描述模式的真实样本数据集
  2. 在仪表板中注明使用样本数据
  3. 提供替换真实数据的说明

3. 设计仪表板布局

遵循标准仪表板布局模式：

┌──────────────────────────────────────────────────┐
│  仪表板标题                        [过滤器 ▼]  │
├────────────┬────────────┬────────────┬───────────┤
│  KPI卡片   │  KPI卡片   │  KPI卡片   │ KPI卡片   │
├────────────┴────────────┼────────────┴───────────┤
│                         │                        │
│    主要图表              │   次要图表             │
│    （最大区域）          │                        │
│                         │                        │
├─────────────────────────┴────────────────────────┤
│                                                  │
│    详情表格（可排序、可滚动）                     │
│                                                  │
└──────────────────────────────────────────────────┘

根据内容调整布局：

  • 顶部2-4个KPI卡片，用于显示关键数字
  • 中间部分1-3个图表，用于趋势和细分
  • 底部可选详情表格，用于深入数据
  • 过滤器位于标题或侧边栏，取决于复杂性

4. 构建HTML仪表板

生成单个自包含HTML文件，包括：

结构（HTML）：

  • 语义HTML5布局
  • 使用CSS Grid或Flexbox的响应式网格
  • 过滤器控件（下拉菜单、日期选择器、切换按钮）
  • 带值和标签的KPI卡片
  • 图表容器
  • 带可排序标题的数据表格

样式（CSS）：

  • 专业配色方案（干净的白色、灰色，数据使用强调色）
  • 基于卡片的布局，带轻微阴影
  • 一致的排版（系统字体，便于快速加载）
  • 响应式设计，适用于不同屏幕尺寸
  • 打印友好样式

交互性（JavaScript）：

  • Chart.js用于交互式图表（通过CDN包含）
  • 过滤器下拉菜单，可同时更新所有图表和表格
  • 可排序表格列
  • 图表上的悬停工具提示
  • 数字格式化（逗号、货币、百分比）

数据（嵌入JSON）：

  • 所有数据直接以JavaScript变量嵌入HTML中
  • 无需外部数据获取
  • 仪表板完全离线工作

5. 实现图表类型

所有图表使用Chart.js。常见仪表板图表模式：

  • 折线图：时间序列趋势
  • 柱状图：类别比较
  • 环形图：组成（当类别少于6个时）
  • 堆叠柱状图：随时间变化的组成
  • 混合图（柱状+折线）：量与率叠加

6. 添加交互性

过滤器：

// 所有过滤器更新中心过滤器状态
// 当过滤器变化时，图表和表格重新渲染
function applyFilters() {
  const filtered = data.filter((row) => matchesFilters(row));
  updateKPIs(filtered);
  updateCharts(filtered);
  updateTable(filtered);
}

表格排序：

  • 点击列标题以升序/降序排序
  • 当前排序列和方向的视觉指示器

工具提示：

  • 图表在悬停时显示详细值
  • KPI卡片显示与上一时期的比较

7. 保存和打开

  1. 将仪表板保存为描述性名称的HTML文件（例如，sales_dashboard.html）
  2. 在用户的默认浏览器中打开它
  3. 确认渲染正确
  4. 提供更新数据或自定义的说明

输出模板

生成的HTML文件遵循此结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>[仪表板标题]</title>
    <script
      src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1"
      integrity="sha384-jb8JQMbMoBUzgWatfe6COACi2ljcDdZQ2OxczGA3bGNeWe+6DChMTBJemed7ZnvJ"
      crossorigin="anonymous"
    ></script>
    <style>
      /* 专业仪表板CSS */
    </style>
  </head>
  <body>
    <div class="dashboard">
      <header><!-- 标题和过滤器 --></header>
      <section class="kpis"><!-- KPI卡片 --></section>
      <section class="charts"><!-- 图表容器 --></section>
      <section class="details"><!-- 数据表格 --></section>
    </div>
    <script>
      const DATA = [
        /* 嵌入JSON数据 */
      ];
      // 仪表板初始化和交互性
    </script>
  </body>
</html>

提示

  • 仪表板是完全自包含的HTML文件——通过发送文件与任何人分享
  • 对于实时仪表板，考虑连接BI工具。这些仪表板是点-in-time快照
  • 请求“黑暗模式”或“演示模式”以获取不同样式
  • 您可以请求特定配色方案以匹配品牌