mcpField
D
data-viz-renderer

data-viz-renderer

github.com/zebbern数据与数据库4.7k47 次安装1 天前更新
代码仓库

关于 data-viz-renderer

这是一项 Python 技能，可将 JSON 数据生成为独立的 HTML/SVG 信息图，适用于展示指标或流程的分析人员和团队。支持四种布局，生成的文件可在浏览器中打开且无需外部依赖。

主要功能

  1. 01四种信息图布局：统计、对比、流程、仪表板
  2. 02通过 JSON 配置调色板和输出选项
  3. 03生成文件内嵌 CSS 和 SVG
  4. 04适配桌面和移动浏览器的布局
  5. 05仅使用 Python 标准库

适用场景

  1. 01在数据报告中呈现 KPI 指标
  2. 02按时期比较多个数据系列
  3. 03说明分步骤的业务流程
  4. 04在仪表板中组合指标与图表

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/zebbern/claude-code-guide --skill data-viz-renderer

安装后在 Claude Code 中输入/data-viz-renderer确认已加载。

附带文件LICENSEscripts/build_infographic.py

详细介绍

数据可视化渲染器

根据 JSON 数据生成独立的 HTML/SVG 信息图。支持以下 4 种类型：

  1. 统计卡片 — KPI 大数字 + 趋势箭头 + 图标
  2. 对比图表 — 包含多个系列的分组条形图
  3. 流程图 — 带编号、图标和连接箭头的分步流程
  4. 仪表板 — 混合布局：统计卡片 + 条形图 + 环形图 + 流程图

输出为完全独立的 HTML 文件（所有 CSS/SVG 均内联，无外部依赖），可直接在浏览器中打开。

用法

基本用法
python3 scripts/build_infographic.py config.json

也支持从标准输入读取：

cat config.json | python3 scripts/build_infographic.py

脚本会向标准输出输出 JSON 状态，并将生成的 HTML 写入 output 字段指定的路径。

JSON 配置格式

通用字段：

字段类型必填描述
titlestring否信息图标题
subtitlestring否副标题
typestring是stats / comparison / flow / dashboard
palettestring否配色方案（默认：auto）
dataobject/array是数据内容（格式取决于类型）
outputstring否输出文件路径（默认：infographic.html）
footerstring否页脚文本
配色方案

可用值：auto（根据数据自动选择）、ocean、sunset、forest、berry、vibrant、corporate、pastel、earth

各类型的数据格式
1. stats — 统计卡片
{
  "type": "stats",
  "data": [
    {
      "label": "Total Revenue",
      "value": "$1.2M",
      "icon": "money",
      "trend": "+12.5%",
      "trend_dir": "up"
    },
    {
      "label": "Users",
      "value": "45,230",
      "icon": "users",
      "trend": "+8.2%",
      "trend_dir": "up"
    }
  ]
}

icon 选项：users、user、money、percent、globe、clock、check、star、target、zap、chart-bar、chart-pie、database、rocket、shield、heart、light、search、mail、settings、flag、trending-up、trending-down

trend_dir：up（绿色向上箭头）或 down（红色向下箭头）

2. comparison — 条形图对比
{
  "type": "comparison",
  "data": {
    "chart_title": "Quarterly Revenue Comparison",
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
      {"name": "2024", "values": [320, 410, 380, 520]},
      {"name": "2025", "values": [380, 490, 450, 610]}
    ]
  }
}
3. flow — 流程图
{
  "type": "flow",
  "data": [
    {"step": 1, "title": "Requirements", "description": "Gather user needs", "icon": "search"},
    {"step": 2, "title": "Design", "description": "Create technical plan", "icon": "light"},
    {"step": 3, "title": "Development", "description": "Code and test", "icon": "settings"},
    {"step": 4, "title": "Launch", "description": "Deploy to production", "icon": "rocket"}
  ]
}
4. dashboard — 混合仪表板
{
  "type": "dashboard",
  "data": {
    "stats": [
      {"label": "DAU", "value": "12.3K", "icon": "users", "trend": "+5%", "trend_dir": "up"},
      {"label": "Conversion Rate", "value": "3.8%", "icon": "target", "trend": "-0.2%", "trend_dir": "down"}
    ],
    "chart": {
      "chart_title": "Monthly Trend",
      "categories": ["Jan", "Feb", "Mar", "Apr"],
      "series": [{"name": "DAU", "values": [10200, 11500, 11800, 12300]}]
    },
    "breakdown": [
      {"label": "iOS", "value": 45},
      {"label": "Android", "value": 38},
      {"label": "Web", "value": 17}
    ],
    "flow": [
      {"step": 1, "title": "Sign Up", "description": ""},
      {"step": 2, "title": "Activate", "description": ""},
      {"step": 3, "title": "Retain", "description": ""}
    ]
  }
}

输出格式

脚本会向标准输出输出 JSON 结果：

{
  "status": "success",
  "output": "/absolute/path/to/infographic.html",
  "type": "stats",
  "title": "My Infographic",
  "palette": "auto",
  "size_bytes": 8432
}

出错时：

{
  "status": "error",
  "errors": ["Missing required field: data"]
}

设计亮点

  • 零外部依赖：纯 Python 标准库，无需安装 pip 包
  • 独立输出：HTML 中内联了所有 CSS 和 SVG，无需联网
  • 响应式布局：适用于桌面和移动浏览器
  • 专业配色方案：8 种预设配色方案 + 自动选择
  • 24+ 个内置图标：常用 SVG 图标，无需字体文件
  • 适配 CJK 字符：字体栈包含 Noto Sans SC、PingFang SC、Microsoft YaHei

使用场景

  • 数据报告中的可视化模块
  • 产品数据仪表板
  • 业务流程图解
  • 季度/月度数据对比
  • 团队 KPI 展示

依赖项

  • Python 3.7+（仅使用标准库）

评论

支持 Markdown