🚀 快速安装

复制以下命令并运行，立即安装此 Skill：

npx skills add https://skills.sh/anthropics/knowledge-work-plugins/build-dashboard

💡 提示：需要 Node.js 和 NPM

/build-dashboard – 构建交互式仪表盘

如果你看到不熟悉的占位符或需要检查哪些工具已连接，请参阅 CONNECTORS.md。

构建一个独立的交互式 HTML 仪表盘，包含图表、筛选器、表格和专业样式。直接在浏览器中打开 —— 无需服务器或依赖项。

用法

/build-dashboard <仪表盘描述> [数据源]

工作流程

1. 理解仪表盘需求

确定：

目的：高管概览、运营监控、深入分析、团队报告
受众：谁会使用这个仪表盘？
关键指标：哪些数据最重要？
维度：用户应该能够按哪些维度进行筛选或细分？
数据源：实时查询、粘贴的数据、CSV 文件还是示例数据

2. 收集数据

如果数据仓库已连接：

查询所需数据
将结果作为 JSON 嵌入到 HTML 文件中

如果数据是粘贴或上传的：

解析并清洗数据
作为 JSON 嵌入仪表盘

如果只有描述没有数据：

创建符合描述架构的逼真样本数据集
在仪表盘中注明使用的是样本数据
提供替换为真实数据的说明

3. 设计仪表盘布局

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

┌──────────────────────────────────────────────────┐
│  仪表盘标题                          [筛选器 ▼]  │
├────────────┬────────────┬────────────┬───────────┤
│  KPI 卡片  │  KPI 卡片  │  KPI 卡片  │ KPI 卡片  │
├────────────┴────────────┼────────────┴───────────┤
│                         │                        │
│    主要图表              │   次要图表              │
│    (最大区域)            │                        │
│                         │                        │
├─────────────────────────┴────────────────────────┤
│                                                  │
│    明细表格 (可排序、可滚动)                       │
│                                                  │
└──────────────────────────────────────────────────┘

根据内容调整布局：

顶部 2-4 个 KPI 卡片展示核心数字
中间 1-3 个图表展示趋势和细分
底部可选明细表格用于深入查看数据
根据复杂程度在页眉或侧边栏放置筛选器

4. 构建 HTML 仪表盘

使用下面的基础模板生成一个独立的 HTML 文件。该文件包含：

结构 (HTML)：

语义化的 HTML5 布局
使用 CSS Grid 或 Flexbox 的响应式网格
筛选控件（下拉框、日期选择器、切换开关）
带有值和标签的 KPI 卡片
图表容器
带有可排序表头的数据表

样式 (CSS)：

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

交互 (JavaScript)：

通过 CDN 引入 Chart.js 实现交互式图表
可同时更新所有图表和表格的下拉筛选器
可排序的表格列
图表悬停工具提示
数字格式化（千位分隔符、货币、百分比）

数据（内嵌 JSON）：

所有数据直接作为 JavaScript 变量嵌入 HTML
无需外部数据获取
仪表盘可完全离线工作

5. 实现图表类型

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

折线图：时间序列趋势
柱状图：类别比较
环形图：构成比例（当类别 <6 时）
堆叠柱状图：随时间变化的构成
混合图表（柱状图 + 折线图）：数量与比率叠加

使用下面每种图表类型的 Chart.js 集成模式。

6. 添加交互性

使用下面的筛选器和交互实现模式来添加下拉筛选器、日期范围筛选器、组合筛选逻辑、可排序表格和图表更新。

7. 保存并打开

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

基础模板

每个仪表盘都遵循此结构：

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0" integrity="sha384-cVMg8E3QFwTvGCDuK+ET4PD341jF3W8nO1auiXfuZNQkzbUUiBGLsIQUE+b1mxws" crossorigin="anonymous"></script>
    <style>
        /* 仪表盘样式 */
    </style>
</head>
<body>
    <div class="dashboard-container">
        <header class="dashboard-header">
            <h1>仪表盘标题</h1>
            <div class="filters">
                <!-- 筛选控件 -->
            </div>
        </header>

        <section class="kpi-row">
            <!-- KPI 卡片 -->
        </section>

        <section class="chart-row">
            <!-- 图表容器 -->
        </section>

        <section class="table-section">
            <!-- 数据表格 -->
        </section>

        <footer class="dashboard-footer">
            <span>数据截止日期：<span id="data-date"></span></span>
        </footer>
    </div>

    <script>
        // 内嵌数据
        const DATA = [];

        // 仪表盘逻辑
        class Dashboard {
            constructor(data) {
                this.rawData = data;
                this.filteredData = data;
                this.charts = {};
                this.init();
            }

            init() {
                this.setupFilters();
                this.renderKPIs();
                this.renderCharts();
                this.renderTable();
            }

            applyFilters() {
                // 筛选逻辑
                this.filteredData = this.rawData.filter(row => {
                    // 应用每个激活的筛选器
                    return true; // 占位符
                });
                this.renderKPIs();
                this.updateCharts();
                this.renderTable();
            }

            // ... 每个部分的实现方法
        }

        const dashboard = new Dashboard(DATA);
    </script>
</body>
</html>

KPI 卡片模式

<div class="kpi-card">
    <div class="kpi-label">总收入</div>
    <div class="kpi-value" id="kpi-revenue">$0</div>
    <div class="kpi-change positive" id="kpi-revenue-change">+0%</div>
</div>

function renderKPI(elementId, value, previousValue, format = 'number') {
    const el = document.getElementById(elementId);
    const changeEl = document.getElementById(elementId + '-change');

    // 格式化数值
    el.textContent = formatValue(value, format);

    // 计算并显示变化
    if (previousValue && previousValue !== 0) {
        const pctChange = ((value - previousValue) / previousValue) * 100;
        const sign = pctChange >= 0 ? '+' : '';
        changeEl.textContent = `${sign}${pctChange.toFixed(1)}% 相较于上一周期`;
        changeEl.className = `kpi-change ${pctChange >= 0 ? 'positive' : 'negative'}`;
    }
}

function formatValue(value, format) {
    switch (format) {
        case 'currency':
            if (value >= 1e6) return `¥${(value / 1e6).toFixed(1)}M`;
            if (value >= 1e3) return `¥${(value / 1e3).toFixed(1)}K`;
            return `¥${value.toFixed(0)}`;
        case 'percent':
            return `${value.toFixed(1)}%`;
        case 'number':
            if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
            if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
            return value.toLocaleString();
        default:
            return value.toString();
    }
}

Chart.js 集成

图表容器模式

<div class="chart-container">
    <h3 class="chart-title">月度收入趋势</h3>
    <canvas id="revenue-chart"></canvas>
</div>

折线图

function createLineChart(canvasId, labels, datasets) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    return new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets.map((ds, i) => ({
                label: ds.label,
                data: ds.data,
                borderColor: COLORS[i % COLORS.length],
                backgroundColor: COLORS[i % COLORS.length] + '20',
                borderWidth: 2,
                fill: ds.fill || false,
                tension: 0.3,
                pointRadius: 3,
                pointHoverRadius: 6,
            }))
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false,
            },
            plugins: {
                legend: {
                    position: 'top',
                    labels: { usePointStyle: true, padding: 20 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return `${context.dataset.label}: ${formatValue(context.parsed.y, 'currency')}`;
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: { display: false }
                },
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return formatValue(value, 'currency');
                        }
                    }
                }
            }
        }
    });
}

柱状图

function createBarChart(canvasId, labels, data, options = {}) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    const isHorizontal = options.horizontal || labels.length > 8;

    return new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: options.label || '数值',
                data: data,
                backgroundColor: options.colors || COLORS.map(c => c + 'CC'),
                borderColor: options.colors || COLORS,
                borderWidth: 1,
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            indexAxis: isHorizontal ? 'y' : 'x',
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return formatValue(context.parsed[isHorizontal ? 'x' : 'y'], options.format || 'number');
                        }
                    }
                }
            },
            scales: {
                x: {
                    beginAtZero: true,
                    grid: { display: isHorizontal },
                    ticks: isHorizontal ? {
                        callback: function(value) {
                            return formatValue(value, options.format || 'number');
                        }
                    } : {}
                },
                y: {
                    beginAtZero: !isHorizontal,
                    grid: { display: !isHorizontal },
                    ticks: !isHorizontal ? {
                        callback: function(value) {
                            return formatValue(value, options.format || 'number');
                        }
                    } : {}
                }
            }
        }
    });
}

环形图

function createDoughnutChart(canvasId, labels, data) {
    const ctx = document.getElementById(canvasId).getContext('2d');
    return new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: data,
                backgroundColor: COLORS.map(c => c + 'CC'),
                borderColor: '#ffffff',
                borderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            cutout: '60%',
            plugins: {
                legend: {
                    position: 'right',
                    labels: { usePointStyle: true, padding: 15 }
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            const total = context.dataset.data.reduce((a, b) => a + b, 0);
                            const pct = ((context.parsed / total) * 100).toFixed(1);
                            return `${context.label}: ${formatValue(context.parsed, 'number')} (${pct}%)`;
                        }
                    }
                }
            }
        }
    });
}

筛选器更改时更新图表

function updateChart(chart, newLabels, newData) {
    chart.data.labels = newLabels;

    if (Array.isArray(newData[0])) {
        // 多个数据集
        newData.forEach((data, i) => {
            chart.data.datasets[i].data = data;
        });
    } else {
        chart.data.datasets[0].data = newData;
    }

    chart.update('none'); // 'none' 禁用动画以实现即时更新
}

筛选器和交互实现

下拉筛选器

<div class="filter-group">
    <label for="filter-region">地区</label>
    <select id="filter-region" onchange="dashboard.applyFilters()">
        <option value="all">全部地区</option>
    </select>
</div>

function populateFilter(selectId, data, field) {
    const select = document.getElementById(selectId);
    const values = [...new Set(data.map(d => d[field]))].sort();

    // 保留"全部"选项，添加唯一值
    values.forEach(val => {
        const option = document.createElement('option');
        option.value = val;
        option.textContent = val;
        select.appendChild(option);
    });
}

function getFilterValue(selectId) {
    const val = document.getElementById(selectId).value;
    return val === 'all' ? null : val;
}

日期范围筛选器

<div class="filter-group">
    <label>日期范围</label>
    <input type="date" id="filter-date-start" onchange="dashboard.applyFilters()">
    <span>至</span>
    <input type="date" id="filter-date-end" onchange="dashboard.applyFilters()">
</div>

function filterByDateRange(data, dateField, startDate, endDate) {
    return data.filter(row => {
        const rowDate = new Date(row[dateField]);
        if (startDate && rowDate < new Date(startDate)) return false;
        if (endDate && rowDate > new Date(endDate)) return false;
        return true;
    });
}

组合筛选逻辑

applyFilters() {
    const region = getFilterValue('filter-region');
    const category = getFilterValue('filter-category');
    const startDate = document.getElementById('filter-date-start').value;
    const endDate = document.getElementById('filter-date-end').value;

    this.filteredData = this.rawData.filter(row => {
        if (region && row.region !== region) return false;
        if (category && row.category !== category) return false;
        if (startDate && row.date < startDate) return false;
        if (endDate && row.date > endDate) return false;
        return true;
    });

    this.renderKPIs();
    this.updateCharts();
    this.renderTable();
}

可排序表格

function renderTable(containerId, data, columns) {
    const container = document.getElementById(containerId);
    let sortCol = null;
    let sortDir = 'desc';

    function render(sortedData) {
        let html = '<table class="data-table">';

        // 表头
        html += '<thead><tr>';
        columns.forEach(col => {
            const arrow = sortCol === col.field
                ? (sortDir === 'asc' ? ' ▲' : ' ▼')
                : '';
            html += `<th onclick="sortTable('${col.field}')" style="cursor:pointer">${col.label}${arrow}</th>`;
        });
        html += '</tr></thead>';

        // 表体
        html += '<tbody>';
        sortedData.forEach(row => {
            html += '<tr>';
            columns.forEach(col => {
                const value = col.format ? formatValue(row[col.field], col.format) : row[col.field];
                html += `<td>${value}</td>`;
            });
            html += '</tr>';
        });
        html += '</tbody></table>';

        container.innerHTML = html;
    }

    window.sortTable = function(field) {
        if (sortCol === field) {
            sortDir = sortDir === 'asc' ? 'desc' : 'asc';
        } else {
            sortCol = field;
            sortDir = 'desc';
        }
        const sorted = [...data].sort((a, b) => {
            const aVal = a[field], bVal = b[field];
            const cmp = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
            return sortDir === 'asc' ? cmp : -cmp;
        });
        render(sorted);
    };

    render(data);
}

仪表盘 CSS 样式

颜色系统

:root {
    /* 背景层级 */
    --bg-primary: #f8f9fa;
    --bg-card: #ffffff;
    --bg-header: #1a1a2e;

    /* 文本 */
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-on-dark: #ffffff;

    /* 数据强调色 */
    --color-1: #4C72B0;
    --color-2: #DD8452;
    --color-3: #55A868;
    --color-4: #C44E52;
    --color-5: #8172B3;
    --color-6: #937860;

    /* 状态颜色 */
    --positive: #28a745;
    --negative: #dc3545;
    --neutral: #6c757d;

    /* 间距 */
    --gap: 16px;
    --radius: 8px;
}

布局

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
}

.dashboard-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--gap);
}

.dashboard-header {
    background: var(--bg-header);
    color: var(--text-on-dark);
    padding: 20px 24px;
    border-radius: var(--radius);
    margin-bottom: var(--gap);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-header h1 {
    font-size: 20px;
    font-weight: 600;
}

KPI 卡片

.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.kpi-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.kpi-label {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.kpi-change {
    font-size: 13px;
    font-weight: 500;
}

.kpi-change.positive { color: var(--positive); }
.kpi-change.negative { color: var(--negative); }

图表容器

.chart-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.chart-container {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.chart-container h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.chart-container canvas {
    max-height: 300px;
}

筛选器

.filters {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.filter-group label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.filter-group select,
.filter-group input[type="date"] {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-on-dark);
    font-size: 13px;
}

.filter-group select option {
    background: var(--bg-header);
    color: var(--text-on-dark);
}

数据表

.table-section {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead th {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #dee2e6;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    user-select: none;
}

.data-table thead th:hover {
    color: var(--text-primary);
    background: #f8f9fa;
}

.data-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
}

.data-table tbody tr:hover {
    background: #f8f9fa;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

响应式设计

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-row {
        grid-template-columns: 1fr;
    }

    .filters {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media print {
    body { background: white; }
    .dashboard-container { max-width: none; }
    .filters { display: none; }
    .chart-container { break-inside: avoid; }
    .kpi-card { border: 1px solid #dee2e6; box-shadow: none; }
}

大数据集性能考虑

数据量指南

数据量	方法
<1,000 行	直接嵌入 HTML。完全交互性。
1,000 – 10,000 行	嵌入 HTML。图表可能需要预聚合。
10,000 – 100,000 行	服务端预聚合。仅嵌入聚合后的数据。
>100,000 行	不适合客户端仪表盘。使用 BI 工具或分页。

预聚合模式

不要嵌入原始数据并在浏览器中聚合：

// 不要这样：嵌入 50,000 行原始数据
const RAW_DATA = [/* 50,000 行 */];

// 应该这样：嵌入前预聚合
const CHART_DATA = {
    monthly_revenue: [
        { month: '2024-01', revenue: 150000, orders: 1200 },
        { month: '2024-02', revenue: 165000, orders: 1350 },
        // ... 12 行而不是 50,000
    ],
    top_products: [
        { product: 'Widget A', revenue: 45000 },
        // ... 10 行
    ],
    kpis: {
        total_revenue: 1980000,
        total_orders: 15600,
        avg_order_value: 127,
    }
};

图表性能

限制折线图每个系列少于 500 个数据点（如有需要可下采样）
限制柱状图少于 50 个类别
对于散点图，限制在 1,000 个点以内（大数据集使用采样）
对于包含多个图表的仪表盘，禁用动画：animation: false in Chart.js options
对于筛选器触发的更新，使用 Chart.update('none') 而不是 Chart.update()

DOM 性能

将数据表限制在 100-200 行可见行。添加分页处理更多数据。
使用 requestAnimationFrame 协调图表更新
避免在筛选器更改时重建整个 DOM — 仅更新更改的元素

// 高效的表格分页
function renderTablePage(data, page, pageSize = 50) {
    const start = page * pageSize;
    const end = Math.min(start + pageSize, data.length);
    const pageData = data.slice(start, end);
    // 仅渲染 pageData
    // 显示分页控件："显示 1-50 条，共 2,340 条"
}

示例

/build-dashboard 包含收入趋势、热门产品和区域细分的月度销售仪表盘。数据在订单表中。

/build-dashboard 这是我们的客服工单数据 [粘贴 CSV]。构建一个仪表盘，显示按优先级划分的数量、响应时间趋势和解决率。

/build-dashboard 为一家 SaaS 公司创建一个高管仪表盘模板，展示 MRR、客户流失率、新客户和 NPS。使用样本数据。

提示

仪表盘是完全独立的 HTML 文件 — 发送文件即可与任何人共享
对于实时仪表盘，建议连接 BI 工具。这些仪表盘是时间点快照
可以要求“深色模式”或“演示模式”以获取不同的样式
你可以要求特定的配色方案以匹配你的品牌

📄 原始文档

完整文档（英文）：

https://skills.sh/anthropics/knowledge-work-plugins/build-dashboard

💡 提示：点击上方链接查看 skills.sh 原始英文文档，方便对照翻译。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Build Interactive Dashboards