\r \r

info-visualize\r

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

核心脚本\r

\r 两个脚本均位于 scripts/ 目录，按需选择：\r \r | 脚本 | 输出格式 | 适用场景 | 依赖 |\r |------|---------|---------|------|\r | svg_bar_chart.py | SVG + HTML | 排行榜、对比图、任意条形图 | 无（纯标准库） |\r | png_longform.py | PNG 长图 | 日报/周报、监控报告、综合信息图 | pip install Pillow |\r \r

工作流\r

\r

1. SVG 横向条形图\r

\r 数据准备 — 将数据整理为标准 JSON：\r \r

{\r
  "title": "A股涨幅 TOP 20",\r
  "subtitle": "2026-03-14  |  全市场 5481 只股票",\r
  "footer": "数据来源: Tushare Pro",\r
  "value_suffix": "%",\r
  "kpis": [\r
    {"label": "榜首涨幅", "value": "+20.01%"},\r
    {"label": "涨停个股", "value": "18"},\r
    {"label": "合计成交额", "value": "342.5 亿"}\r
  ],\r
  "items": [\r
    {"label": "中红医疗", "value": 20.01, "tag": "医疗保健", "extra": "300981.SZ"},\r
    {"label": "通裕重工", "value": 19.94, "tag": "工程机械", "extra": "300185.SZ"}\r
  ]\r
}\r
```\r
\r
**调用方式**（命令行）：\r
```bash\r
python scripts/svg_bar_chart.py --input data.json --output chart.html --value-suffix %\r
```\r
\r
**调用方式**（Python 导入）：\r
```python\r
from scripts.svg_bar_chart import build_svg_chart\r
items = [{"label": "标签", "value": 数字, "tag": "分类"}, ...]\r
config = {"title": "...", "subtitle": "...", "kpis": [...], "value_suffix": "%"}\r
svg_str, html_str = build_svg_chart(items, config)\r
with open("chart.html", "w", encoding="utf-8") as f:\r
    f.write(html_str)\r
```\r
\r
**关键配置项**：\r
- `show_reference_line`: 在指定值处绘制垂直参考线（如涨停线10%）\r
- `reference_label`: 参考线标签\r
- `max_value_override`: 手动指定 X 轴最大值\r
- `bar_threshold_colors`: 按阈值分色，格式 `[(20, "#FF2244"), (10, "#FFAA00")]`\r
\r
### 2. PNG 长图报告\r
\r
**数据结构**：\r
```json\r
{\r
  "title": "报告标题",\r
  "subtitle": "2026-03-14 20:00 更新",\r
  "status_tag": {"text": "CRITICAL", "level": "critical"},\r
  "kpis": [\r
    {"label": "布伦特原油", "value": "$103/桶"},\r
    {"label": "风险等级", "value": "CRITICAL"},\r
    {"label": "海峡通行", "value": "2艘/日"}\r
  ],\r
  "sections": [\r
    {\r
      "type": "text",\r
      "title": "态势综述",\r
      "content": "当前局势摘要...\
第二段..."\r
    },\r
    {\r
      "type": "table",\r
      "title": "关键指标",\r
      "headers": ["指标", "当前值", "变化"],\r
      "rows": [["布伦特", "$103", "+21%"]]\r
    },\r
    {\r
      "type": "bar",\r
      "title": "各国影响",\r
      "value_suffix": "%",\r
      "items": [{"label": "中国", "value": 35}, {"label": "日本", "value": 25}]\r
    },\r
    {\r
      "type": "cards",\r
      "title": "风险要素",\r
      "items": [\r
        {"title": "封锁风险", "content": "说明文字", "level": "critical"},\r
        {"title": "储备缓冲", "content": "说明文字", "level": "warning"}\r
      ]\r
    },\r
    {\r
      "type": "timeline",\r
      "title": "近期事件",\r
      "events": [\r
        {"date": "2026-02-28", "text": "美以联合空袭伊朗"},\r
        {"date": "2026-03-01", "text": "海峡通行量骤降97%"}\r
      ]\r
    }\r
  ],\r
  "footer": "数据来源: Jane's / EIA / 新浪财经",\r
  "next_update": "下次更新: 明日 20:00"\r
}\r
```\r
\r
**调用方式**（命令行）：\r
```bash\r
python scripts/png_longform.py --input report.json --output report.png\r
# 同时归档到指定目录：\r
python scripts/png_longform.py --input report.json --output report.png --archive "C:/Users/user/.ai-memory/news"\r
```\r
\r
**调用方式**（Python 导入）：\r
```python\r
from scripts.png_longform import render_from_json, LongformRenderer\r
import json\r
\r
with open("report.json") as f:\r
    data = json.load(f)\r
render_from_json(data, "report.png")\r
```\r
\r
**section type 参考**：\r
- `text`：纯文字段落，支持 `\
` 换行\r
- `table`：表格，需 `headers`（列名列表）+ `rows`（二维列表）\r
- `bar`：横向条形图，需 `items`（`[{label, value, color?}]`）\r
- `cards`：双列卡片组，`level` 可选 `normal/warning/critical/info`\r
- `timeline`：时间线，需 `events`（`[{date, text}]`）\r
\r
## 设计规范（深色主题）\r
\r
所有输出遵循统一视觉规范，与用户已有报告风格完全一致：\r
\r
- **画布宽度**：900px\r
- **背景色**：深海军蓝 `#0E1624`\r
- **强调色**：青绿 `#2EC4B6`（标题、圆点、边框）\r
- **数字色**：金黄 `#FFC83C`（KPI 大数字）\r
- **状态色**：红 `#E65050`（critical）/ 橙 `#FF8C28`（warning）/ 绿 `#3CC878`（normal）\r
- **字体**：微软雅黑 `msyhbd.ttc`（标题）+ `msyh.ttc`（正文）\r
- **顶部**：3px 青绿色分割线 + 深色 Header\r
- **底部**：报告时间 + WorkBuddy 水印\r
\r
## 输出路径惯例\r
\r
- 当前项目目录：`./chart.html` / `./report.png`\r
- 若用户有归档需求（如自动化任务）：额外复制到 `C:\Users\ToddC\.ai-memory\
ews\`\r
\r
## 常见问题\r
\r
**Q: SVG 在浏览器里空白？**  \r
A: 确保 HTML 中 SVG 已直接内嵌（inline SVG），不要使用 `\x3Cimg src="chart.svg">`，后者在某些浏览器会有 CORS 限制。`svg_bar_chart.py` 默认输出 inline HTML，直接双击打开即可。\r
\r
**Q: PNG 中文乱码？**  \r
A: 脚本自动按优先顺序搜索 `msyhbd.ttc → msyh.ttc → simhei.ttf → simsun.ttc`，Windows 系统通常自带。若仍乱码，确认 `C:\Windows\Fonts\msyh.ttc` 存在。\r
\r
**Q: 如何调整条形图颜色？**  \r
A: 在 `items` 中为每项添加 `"color": "#FF5533"`；或在 config 中设置 `bar_threshold_colors`。\r