data-viz-renderer

用途

Data Viz Renderer 用于将 JSON 数据转换为自包含的 HTML/SVG 信息图，适合在数据报告、产品数据看板、业务流程示意、季度/月度数据对比、团队 KPI 展示等场景中快速生成可视化内容。

主要能力

支持四种信息图类型：

Stats Cards（统计卡片）：KPI 大数字 + 趋势箭头 + 图标。
Comparison Chart（对比柱状图）：多系列分组柱状图。
Flow Diagram（流程图）：带编号、图标和连接箭头的分步流程。
Dashboard（混合仪表盘）：统计卡片 + 柱状图 + 环形图 + 流程的混合布局。

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

设计特点：

零外部依赖：纯 Python 标准库，无需 pip install。
自包含输出：HTML 内联全部 CSS 和 SVG，无需网络。
响应式布局：适配桌面和移动端浏览器。
专业配色：8 种预设配色方案 + 自动选择。
24+ 内置图标：常用 SVG 图标，无需字体文件。
中文字体友好：字体栈包含 Noto Sans SC、PingFang SC、Microsoft YaHei。

使用方式

基本用法：

python3 scripts/build_infographic.py config.json

也支持从标准输入读取：

cat config.json | python3 scripts/build_infographic.py

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

JSON 配置格式

通用字段：

字段	类型	必填	说明
title	string	否	信息图标题
subtitle	string	否	副标题
type	string	是	stats / comparison / flow / dashboard
palette	string	否	配色方案（默认：auto）
data	object/array	是	数据内容（格式取决于类型）
output	string	否	输出文件路径（默认：infographic.html）
footer	string	否	页脚文本

配色方案

可选值：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": ""}
    ]
  }
}

输出格式

脚本向 stdout 输出 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"]
}

适用场景

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

限制

依赖 Python 3.7+（仅标准库）。资料未提供其他平台支持、收费方式或性能上限等信息。