Info Visualize

v1.0.1

信息可视化技能,将结构化数据渲染为深色主题的高质量图表和长图报告。 支持两类输出:第一类是零依赖 SVG/HTML 交互式横向条形图,直接在浏览器打开; 第二类是基于 Pillow 的 PNG 长图报告,含标题区、KPI 卡片、文字段落、表格、 条形图、卡片组、时间线、页脚等模块,适合监控报告、日报、排行榜等场景...

0· 259·0 current·0 all-time

Install

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for todd-9527/info-visualize.

Previewing Install & Setup.
Prompt PreviewInstall & Setup
Install the skill "Info Visualize" (todd-9527/info-visualize) from ClawHub.
Skill page: https://clawhub.ai/todd-9527/info-visualize
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Canonical install target

openclaw skills install todd-9527/info-visualize

ClawHub CLI

Package manager switcher

npx clawhub@latest install info-visualize
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
Purpose & Capability
Name/description (render SVG and PNG long-form reports) lines up with the provided scripts and SKILL.md. The PNG renderer depends on Pillow (documented); the SVG script uses only the standard library. No unrelated credentials, binaries, or services are requested.
Instruction Scope
SKILL.md and the scripts stay within the stated purpose: they load JSON data, render SVG/HTML or PNG images, and optionally copy outputs to an archive folder. The README suggests copying to paths like a user .ai-memory folder as an example; the archive behavior is opt-in via a CLI flag rather than automatic. The skill does reference local font files (C:/Windows/Fonts) and includes a WorkBuddy watermark in outputs (intentional branding).
Install Mechanism
No install spec (instruction-only) and no network downloads in code. The only runtime dependency is Pillow for PNG output (documented). This is a low-risk install profile.
Credentials
The skill requests no environment variables or credentials. It accesses local filesystem paths for fonts and accepts an optional archive path provided by the user. Those filesystem accesses are proportionate to producing output images.
Persistence & Privilege
always:false and no mechanism to register or persist itself into the agent environment. The skill does not modify other skills or global agent configs; archive/copy is an explicit, user-specified action.
Assessment
This skill appears to do what it says (render SVG or PNG reports). Before installing or using it: 1) Note PNG rendering requires Pillow—use a virtualenv or test install in an isolated environment. 2) The code prefers Windows fonts under C:\Windows\Fonts; on Linux/macOS you may need to install or point it to appropriate TTF files. 3) Archiving/copying behavior is opt-in (via CLI flag); review the path you pass to --archive to avoid writing outputs into sensitive directories. 4) There are some minor code issues (e.g., an internal function references math without a top-level import) which may cause runtime errors in some paths—test with sample JSON before automating. 5) No network calls or secret exfiltration were found, but as with any code from an unknown source, review the scripts yourself if you need higher assurance.

Like a lobster shell, security has layers — review code before you run it.

latestvk97827mpn86jfzt1ph1q388ten82wm87
259downloads
0stars
2versions
Updated 1mo ago
v1.0.1
MIT-0

info-visualize

将数据渲染为专业深色主题图表和长图报告的通用技能。

核心脚本

两个脚本均位于 scripts/ 目录,按需选择:

脚本输出格式适用场景依赖
svg_bar_chart.pySVG + HTML排行榜、对比图、任意条形图无(纯标准库)
png_longform.pyPNG 长图日报/周报、监控报告、综合信息图pip install Pillow

工作流

1. SVG 横向条形图

数据准备 — 将数据整理为标准 JSON:

{
  "title": "A股涨幅 TOP 20",
  "subtitle": "2026-03-14  |  全市场 5481 只股票",
  "footer": "数据来源: Tushare Pro",
  "value_suffix": "%",
  "kpis": [
    {"label": "榜首涨幅", "value": "+20.01%"},
    {"label": "涨停个股", "value": "18"},
    {"label": "合计成交额", "value": "342.5 亿"}
  ],
  "items": [
    {"label": "中红医疗", "value": 20.01, "tag": "医疗保健", "extra": "300981.SZ"},
    {"label": "通裕重工", "value": 19.94, "tag": "工程机械", "extra": "300185.SZ"}
  ]
}

调用方式(命令行):

python scripts/svg_bar_chart.py --input data.json --output chart.html --value-suffix %

调用方式(Python 导入):

from scripts.svg_bar_chart import build_svg_chart
items = [{"label": "标签", "value": 数字, "tag": "分类"}, ...]
config = {"title": "...", "subtitle": "...", "kpis": [...], "value_suffix": "%"}
svg_str, html_str = build_svg_chart(items, config)
with open("chart.html", "w", encoding="utf-8") as f:
    f.write(html_str)

关键配置项

  • show_reference_line: 在指定值处绘制垂直参考线(如涨停线10%)
  • reference_label: 参考线标签
  • max_value_override: 手动指定 X 轴最大值
  • bar_threshold_colors: 按阈值分色,格式 [(20, "#FF2244"), (10, "#FFAA00")]

2. PNG 长图报告

数据结构

{
  "title": "报告标题",
  "subtitle": "2026-03-14 20:00 更新",
  "status_tag": {"text": "CRITICAL", "level": "critical"},
  "kpis": [
    {"label": "布伦特原油", "value": "$103/桶"},
    {"label": "风险等级", "value": "CRITICAL"},
    {"label": "海峡通行", "value": "2艘/日"}
  ],
  "sections": [
    {
      "type": "text",
      "title": "态势综述",
      "content": "当前局势摘要...\n第二段..."
    },
    {
      "type": "table",
      "title": "关键指标",
      "headers": ["指标", "当前值", "变化"],
      "rows": [["布伦特", "$103", "+21%"]]
    },
    {
      "type": "bar",
      "title": "各国影响",
      "value_suffix": "%",
      "items": [{"label": "中国", "value": 35}, {"label": "日本", "value": 25}]
    },
    {
      "type": "cards",
      "title": "风险要素",
      "items": [
        {"title": "封锁风险", "content": "说明文字", "level": "critical"},
        {"title": "储备缓冲", "content": "说明文字", "level": "warning"}
      ]
    },
    {
      "type": "timeline",
      "title": "近期事件",
      "events": [
        {"date": "2026-02-28", "text": "美以联合空袭伊朗"},
        {"date": "2026-03-01", "text": "海峡通行量骤降97%"}
      ]
    }
  ],
  "footer": "数据来源: Jane's / EIA / 新浪财经",
  "next_update": "下次更新: 明日 20:00"
}

调用方式(命令行):

python scripts/png_longform.py --input report.json --output report.png
# 同时归档到指定目录:
python scripts/png_longform.py --input report.json --output report.png --archive "C:/Users/user/.ai-memory/news"

调用方式(Python 导入):

from scripts.png_longform import render_from_json, LongformRenderer
import json

with open("report.json") as f:
    data = json.load(f)
render_from_json(data, "report.png")

section type 参考

  • text:纯文字段落,支持 \n 换行
  • table:表格,需 headers(列名列表)+ rows(二维列表)
  • bar:横向条形图,需 items[{label, value, color?}]
  • cards:双列卡片组,level 可选 normal/warning/critical/info
  • timeline:时间线,需 events[{date, text}]

设计规范(深色主题)

所有输出遵循统一视觉规范,与用户已有报告风格完全一致:

  • 画布宽度:900px
  • 背景色:深海军蓝 #0E1624
  • 强调色:青绿 #2EC4B6(标题、圆点、边框)
  • 数字色:金黄 #FFC83C(KPI 大数字)
  • 状态色:红 #E65050(critical)/ 橙 #FF8C28(warning)/ 绿 #3CC878(normal)
  • 字体:微软雅黑 msyhbd.ttc(标题)+ msyh.ttc(正文)
  • 顶部:3px 青绿色分割线 + 深色 Header
  • 底部:报告时间 + WorkBuddy 水印

输出路径惯例

  • 当前项目目录:./chart.html / ./report.png
  • 若用户有归档需求(如自动化任务):额外复制到 C:\Users\ToddC\.ai-memory\news\

常见问题

Q: SVG 在浏览器里空白?
A: 确保 HTML 中 SVG 已直接内嵌(inline SVG),不要使用 <img src="chart.svg">,后者在某些浏览器会有 CORS 限制。svg_bar_chart.py 默认输出 inline HTML,直接双击打开即可。

Q: PNG 中文乱码?
A: 脚本自动按优先顺序搜索 msyhbd.ttc → msyh.ttc → simhei.ttf → simsun.ttc,Windows 系统通常自带。若仍乱码,确认 C:\Windows\Fonts\msyh.ttc 存在。

Q: 如何调整条形图颜色?
A: 在 items 中为每项添加 "color": "#FF5533";或在 config 中设置 bar_threshold_colors

Comments

Loading comments...