企业官网建设流程全解析

OpenMontage 视频数据可视化实战指南：从图表选型到 Remotion 动效落地

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

本指南围绕 OpenMontage 开源视频生产系统中skills/creative/data-visualization.md技能文档展开，系统讲解在视频场景中如何把统计数据、对比、趋势、构成与关键指标转化为清晰、准确、有冲击力的可视化画面，并覆盖图表类型决策、动画编排、标签布局、数据密度、色彩纪律与可访问性六条主线。读完本文，你将掌握一套可直接套用的图表选型决策树、三种标准动画叙事模式、1080p 字号与对比度底线，以及如何将图表设计无缝接入场景导演（Scene Director）的 JSON 场景规格。

一、技能定位：什么时候调用数据可视化

在 OpenMontage 的 Agent 技能体系中，data-visualization属于skills/creative/目录下的创作类技能（其兄弟技能还包括 video-editing.md、storytelling.md、data-visualization.md 等）。它的触发条件是：某个场景需要以视觉形式呈现数据——统计数据、对比、趋势、构成比例或关键指标。

该技能回答四个核心问题：

1. 该用哪种图表？——由"图表类型决策树"决定；
2. 图表怎么动起来？——由"动画编排"三模式与计时规则决定；
3. 标签放哪里？字号多大？——由"标签放置规则"与"数据密度 vs 可读性"决定；
4. 颜色怎么取？——由"从 Playbook 派生图表颜色"决定。

在 OpenMontage 的完整生产管线中，数据可视化并非孤立环节：它既依赖底层生成工具（diagram_gen、image_selector、Manim），也依赖渲染侧的能力（Remotion 图表组件），最终通过场景导演的movement、overlay_notes、required_assets字段落到每个场景的具体规格上。

二、工具矩阵：四条图表生产路径

技能文档给出了四类工具，各自的角色与适用边界如下：

2.1 diagram_gen：Mermaid 优先、Pillow 兜底

在源码 tools/graphics/diagram_gen.py 中，diagram_gen工具被实现为DiagramGen类（继承自BaseTool），其输入模式（input_schema）支持三种diagram_type：

• mermaid：直接渲染 Mermaid 语法，优先调用mmdc（Mermaid CLI），支持theme（dark/light/neutral，默认dark）、width（默认 1200）、height（默认 800）等参数；渲染时以-b transparent输出透明背景，便于后续合成；
• flowchart/boxes：使用 Pillow 绘制方框箭头图，支持boxes（label+color）、connections（from/to/label）与title，内置三套主题色板；
• 当 Mermaid 与 Pillow 都不可用时，get_status()返回UNAVAILABLE。

diagram_gen的依赖安装方式在源码中同样注明：npm install -g @mermaid-js/mermaid-cli或pip install Pillow。

2.2 Remotion：数据图表的最终渲染通道

技能文档强调"视频中的每张图表都应该是动画的"，而这正是 Remotion 图表组件承担的角色。在 remotion-composer/src/components/charts/index.ts 导出的一套图表组件中，每个组件都按1920x1080画布设计，并通过 Remotion 的spring与interpolate驱动动画。关于 Remotion 在 OpenMontage 中的整体路由（默认合成引擎、场景类型、图表动画枚举），可参考 skills/core/remotion.md。

三、图表类型决策树：先讲对故事，再选对图表

技能文档给出了一套自上而下、命中即停的决策逻辑，这是数据可视化场景的第一道闸门：

Is there data to visualize? NO -> Use a text card or stat card instead YES -> How many data points? < 3 -> Use text or stat card (charts look empty with 1-2 points) 3-9 -> Continue to "What story does the data tell?" > 12 -> Simplify first: aggregate into top-N + "Other", then continue What story does the data tell? |-- Comparing quantities across categories? | -> BAR CHART (horizontal if labels are long) |-- Showing a trend over time? | -> LINE CHART (area chart if showing volume) |-- Showing parts of a whole? | -> PIE / DONUT CHART (max 5-6 slices) | (If > 6 categories, aggregate smallest into "Other") |-- Showing key metrics / KPIs? | -> KPI GRID (3-6 stat cards in a grid layout) |-- Showing ranking or ordered list? | -> HORIZONTAL BAR CHART (sorted descending) |-- Showing before/after or change? | -> PAIRED BAR CHART or STAT CARD with delta arrow |-- Showing correlation between two variables? | -> LINE CHART with dual series (avoid scatter in video -- too dense) |-- None of the above? | -> Default to BAR CHART (most universally readable)

几个关键判据值得展开：

• 数据量先决条件：少于 3 个数据点时图表会显得"空"，应改用文本卡或统计卡；多于 12 个类别时先做聚合（Top 5~7 + "Other"）再画图；
• 散点图在视频中是禁忌：相关性比较优先用双序列折线图，因为散点图在 5~7 秒的画面窗口内过于密集，观众无法完成"定位—对照—理解"的阅读动作；
• 条形图是最终兜底：它是最普适、最易读的图表形态。

3.1 何时不要用图表

这里的"统计卡"（Stat Card）在 OpenMontage 中有对应的 Remotion 实现 remotion-composer/src/components/StatCard.tsx：默认statFontSize = 128、subtitleFontSize = 36，数字以spring从0.8缩放到1.0弹出，副标题延迟 8 帧淡入——正是技能文档所说"全屏统计卡 + 冲击力动画"的落点。

四、动画编排：三种标准叙事模式

技能文档的核心理念是：静态图表在视频中像幻灯片，不是视频。因此每种图表都要有明确的动画叙事。

4.1 模式一：Build-Up（默认模式）

先显示空坐标轴/画框，再让数据依次进场：

Frame 0.0s: Empty chart frame (axes, title, gridlines visible) Frame 0.3s: First data element begins animating in Frame 2.0s: All data elements fully rendered Frame 2.0-5.0s: Hold for readability

对应到具体图表类型的动画语言：

• 条形图：柱子从基线向上生长，从左到右错峰入场，每根延迟 0.1s；
• 折线图：线条沿数据路径从左到右"绘制"；
• 饼图/环图：从 12 点钟方向顺时针填充，最大的扇区先出现；
• KPI 网格：数字从 0 滚动到目标值（里程表效果）。

4.2 模式二：Narrative Highlight（叙事高亮）

当旁白逐点讲解数据时，让画面聚焦与声音同步：

Frame 0.0s: Full chart visible but all elements at 30% opacity (desaturated) Frame 0.5s: First highlighted element goes full color + slight scale-up Frame 3.0s: First element returns to normal, second element highlights ...continue for each narrated point

4.3 模式三：Comparison Reveal（对比揭示）

先展示基线，再动画化变化过程：

Frame 0.0s: Baseline data visible (e.g., "Before" bars) Frame 2.0s: Hold baseline for comprehension Frame 2.5s: Animate change (bars grow/shrink to "After" values) Frame 3.5s: Delta labels appear (+40%, -15%, etc.) Frame 3.5-7.0s: Hold for readability

适用于前后对比、同比、A/B 测试等叙事。

4.4 计时规则与硬性底线

关键规则：图表必须完整构建并停留至少 3 秒后才允许场景切换。观众需要时间阅读；如果旁白在图表可读之前就推进了，要么延长场景，要么简化图表。

4.5 源码印证：Remotion 图表组件的动画实现

动画规则在 remotion-composer/src/components/charts/BarChart.tsx 中有着一一对应的实现：

• BarChart的animationStyle支持三种取值：grow-up（默认，spring弹跳生长，config: { damping: 14, stiffness: 80 }）、slide-in（线性插值滑入）、pop（快速弹跳，damping: 8, stiffness: 150, mass: 0.6）；
• 错峰入场通过const staggerDelay = i * 4;实现——每一根柱子比前一根晚 4 帧（约 0.13s@30fps），与技能文档"0.1s 延迟"吻合；
• 柱子从基线生长：animatedHeight = barHeightFull * barProgress，即高度随动画进度从 0 增长到全值；
• 数值标签在barProgress >= 0.7时才淡入（interpolate(barProgress, [0.7, 1], [0, 1])），保证标签出现时柱子已经足够高、不会悬空；
• 组件内置了网格线（5 等分）、坐标轴，以及结尾 15 帧的整体淡出（fadeOut），与 Playbook 的转场衔接。

remotion-composer/src/components/charts/KPIGrid.tsx 则实现了技能文档的 KPI 网格规范：

• animationStyle支持count-up（里程表数字滚动）、pop（卡片弹入）、cascade（卡片级联滑入）三种模式；
• 数字滚动通过Math.round(metric.value * countProgress)实现"从 0 滚动到终值"；
• change字段渲染 Δ 指示器：正数显示绿色▲，负数显示红色▼，并在延迟 18~25 帧后淡入——正是"Green up, red down"；
• 卡片采用borderLeft: 4px solid ${accentColor}的左侧强调条，符合现代仪表盘审美。

五、标签放置规则：让每一个元素都有"名分"

技能文档按图表类型给出了精细的标签规范，这些规则直接决定画面在 5~7 秒窗口内的可读性：

5.1 条形图

Vertical bars: - Value labels: ABOVE each bar (or INSIDE if bar is tall enough for legible text) - Category labels: Below on x-axis, horizontal text - If labels overlap: rotate 45 degrees or use horizontal bars instead - Y-axis: include gridlines, omit axis label if title makes it obvious Horizontal bars: - Value labels: TO THE RIGHT of each bar - Category labels: Left-aligned on y-axis - Preferred when category names are longer than 2 words

在 BarChart.tsx 中可以看到实现细节：数值标签位于barY - 12（柱顶上方 12px），类别标签位于chartBottom + 40（x 轴下方），字号分别为 22px 与 20px；柱宽被限制在Math.min((chartWidth - totalGap) / barCount, 120)，避免过宽柱子造成的失衡感。

5.2 折线图

- Endpoint labels: Show value at the last data point (right end) - Start label: Show value at the first data point (left end) for context - Dense data (>7 points): Label only start, end, and notable peaks/valleys - Avoid: Labels on every point (creates clutter in video) - Legend: Top-right or inline (label next to the line) for multi-series

折线图组件 remotion-composer/src/components/charts/LineChart.tsx 的实现要点：yMax取数据最大值再上浮 10% 作为余量（yMax * 1.1），Y 轴始终从 0 开始；支持draw（路径绘制）与fade-in两种动画；showMarkers控制数据点标记、showLegend控制图例显示，便于稀疏标注。

5.3 饼图 / 环图

- Large slices (>= 10%): Label INSIDE the slice (percentage + category) - Small slices (< 10%): Label OUTSIDE with leader line connecting to slice - Center of donut: Use for total value or key metric label - Maximum: 5-6 slices. Combine anything under 5% into "Other" - Always show percentages, not just raw values

5.4 KPI 网格

- Large number: Center of each card, using stat_card font (3-4x body size) - Label: Below the number, smaller font, describes the metric - Delta indicator: Small arrow + percentage showing change (green up, red down) - Grid: 2x2 or 3x2 layout, evenly spaced, consistent card sizing

在 KPIGrid.tsx 中：数字字号 56px/字重 800、标签字号 22px/字重 500、Δ 指示器 20px/字重 600，卡片采用gridPadding = 100、cardGap = 28的均匀网格排布——与"stat_card 字号 3~4 倍正文"的要求一致（可对照 styles/clean-professional.yaml 中stat_card: size_multiplier: 3.0）。

5.5 通用标签规则

• 标题必须存在：每张图表都要有清晰标题（左上或顶部居中）；
• 来源引用：数据来自外部时，在底部小字标注Source: [name]；
• 单位必显：在标题或坐标轴上显示单位（%、$、秒等）；
• 无孤儿元素：每个视觉元素都要有标签或被旁白解释。

六、数据密度 vs 可读性：视频不是电子表格

技能文档反复强调一个事实：观众无法暂停、滚动或放大。每个数据点都在 5~7 秒的窗口内争夺注意力。

Ideal data points per chart type: Bar chart: 5-7 bars (max 9) Line chart: 5-12 points (max 15, but label sparsely) Pie chart: 3-5 slices (max 6) KPI grid: 3-6 metrics (max 6)

6.1 简化策略

6.2 字号底线（1080p 基准，不可妥协）

缩放规则：4K 输出全部乘以 2 倍；720p 输出仍适用以上下限（这是地板，不是天花板）。

OpenMontage 的 Playbook 校验层将这一标准固化为可执行代码：在 styles/playbook_loader.py 中定义了MIN_VIDEO_BODY_SIZE_PX = 24，validate_accessibility()会检查正文字号底线（24px）、标题层级（heading 字重须大于 body 且差值建议 ≥200）、stat_card倍率（建议 ≥2.0x）等，任何违反都会以 warning/error 形式输出。

七、色彩纪律：从 Playbook 派生图表配色

7.1 配色派生优先级

Color derivation priority: 1. playbook.visual_language.color_palette.chart_palette (if the playbook defines one) 2. Derive from primary + accent colors: - Bar/slice 1: primary[0] - Bar/slice 2: accent[0] - Bar/slice 3: primary[1] - Bar/slice 4: accent[1] - Bar/slice 5+: generate by adjusting lightness of primary[0] 3. Background: use playbook background color 4. Text/labels: use playbook text color 5. Gridlines: use playbook muted color at 50% opacity

chart_palette是 Playbook 的正式字段。在 schemas/styles/playbook.schema.json 中，它的定义是"ordered array of hex colors for chart data series"，要求至少 2 个、每个都匹配^#[0-9A-Fa-f]{6}$；color_rules字段则支持harmony_type（complementary/analogous/triadic/split-complementary）、contrast_validation、colorblind_safe三个开关。

以预置样式 styles/clean-professional.yaml 为例，其chart_palette为：

chart_palette: - "#2563EB" # 主色蓝 - "#F59E0B" # 强调琥珀 - "#10B981" # 成功绿 - "#8B5CF6" # 紫 - "#EF4444" # 警示红 - "#06B6D4" # 青 color_rules: harmony_type: "analogous" contrast_validation: true colorblind_safe: true

这与技能文档示例中 "primary[0] #2563EB、accent[0] #F59E0B" 的取值完全一致，也和 BarChart.tsx 的默认colors数组（#2563EB, #F59E0B, #10B981, #EC4899, #06B6D4, #8B5CF6）对齐——从 Playbook → 组件默认值，颜色体系是一脉相承的。

7.2 高亮与聚焦策略

Highlighting strategy: - KEY data point: Full saturation of accent[0], slight scale-up (1.05x) - FOCUS data points: Full saturation of their assigned color - NON-FOCUS points: Desaturate to 30% opacity or use muted color - BASELINE/CONTEXT: Dashed lines using muted color

7.3 可访问性规则：绝不只用颜色传义

• 叠加纹理：条形/扇区上使用剖面线、点阵或条纹，与颜色并用；
• 必配标签：每根柱、每个扇区、每条线都要有文字标签，不能只依赖图例；
• 对比度：相邻图表元素之间最小 3:1；
• 色盲安全：避免红绿作为唯一区分手段；表达正负对比时优先蓝橙或蓝黄配对。

OpenMontage 在 styles/playbook_loader.py 中内置了完整的可访问性工具链，可做三层自动校验：

1. validate_contrast(fg, bg)：按 WCAG 2.1 计算相对亮度与对比度比值（L = 0.2126*R + 0.7152*G + 0.0722*B），并给出 AA/AAA 普通文本与大号文本的通过判定；
2. check_color_blind_safety(colors)：模拟三种色觉缺陷（deuteranopia 红绿、protanopia 红绿偏移、tritanopia 蓝黄）的色相混淆区间，标记可能无法区分的颜色对；饱和度 <0.15 的灰色与明度差 >0.3 的配对会被豁免；
3. validate_palette(playbook)/validate_accessibility(playbook)：批量检查主文本/背景、muted 文本、overlay 文本/背景的对比度，并对primary + accent + chart_palette做色盲安全检查，最终输出pass、error_count、warning_count与明细。

此外generate_harmony(base_hex, harmony_type)提供基于 HSL 的配色和谐生成（互补、邻近、三角、分裂互补四种），compute_type_scale()提供模块化字号缩放（支持minor_second1.067 到golden1.618 六档比例）。

八、常见陷阱：误导性图表、动画失误与设计失误

8.1 误导性图表

8.2 动画失误

8.3 设计失误

九、与场景导演的集成：把设计规范落进 JSON 场景

技能文档最后给出了数据可视化技能在 OpenMontage 工作流中的接入方式：当场景导演识别出数据可视化需求时，按以下五步应用本技能：

1. 用上面的决策树确定图表类型；
2. 在场景的movement字段中指定动画模式（如"build-up: bars grow from baseline over 2s, hold 4s"）；
3. 在overlay_notes中写明标签规格（如"value labels above bars, title top-left, source bottom-right"）；
4. 在required_assets描述中引用 Playbook 颜色（如"bar chart using primary[0] #2563EB for main bars, accent[0] #F59E0B for highlight bar"）；
5. 设置场景时长 = 动画（2~4s）+ 停留（3~5s）= 每个图表场景至少 5 秒。

9.1 示例场景规格（可直接复用）

技能文档给出的完整 JSON 示例值得完整保留，它演示了所有规范如何落进一个真实场景：

{ "id": "scene-7", "type": "animation", "description": "Horizontal bar chart comparing response times: Traditional DB 450ms, Vector DB 12ms, Cached 3ms. Bars grow left-to-right with stagger. Vector DB bar highlighted in accent color. Hold for readability.", "start_seconds": 32, "end_seconds": 40, "script_section_id": "s5", "framing": "full-screen chart, centered with generous padding", "movement": "build-up: bars grow from left over 2.5s with 0.3s stagger, hold 5s", "transition_in": "fade", "transition_out": "dissolve", "overlay_notes": "Title: 'Query Response Time Comparison'. Value labels right of bars (ms units). Source: 'Benchmark 2024' bottom-right 16px. Vector DB bar uses accent[0], others use primary[0] at 50% opacity.", "required_assets": [ { "type": "chart_data", "description": "Horizontal bar chart data: Traditional DB 450ms, Vector DB 12ms, Cached 3ms. Use playbook primary #2563EB at 50% for context bars, accent #F59E0B for Vector DB highlight bar.", "source": "generate" } ] }

这个示例浓缩了前文的全部规范：决策树选型（3 个数据点、排名/对比 → 水平条形图）、动画编排（build-up + 0.3s 错峰 + 5s 停留）、标签放置（数值标签在条右侧、标题置顶、来源右下 16px）、色彩纪律（primary 50% 透明度做背景条、accent 全饱和做高亮条）。movement、overlay_notes、required_assets三个字段正是场景导演消费本技能的标准入口。

十、交付前质量清单

技能文档以一份 12 项检查清单收尾，这也是每个数据可视化场景交付前的最终门禁：

• 图表类型与数据叙事匹配（而不是"默认用条形图"）
• 数据点数量在限制内：条形 5~7 根、饼图 3~5 片、折线 5~12 个点
• 动画时长达标：构建至少 2~4s，停留至少 3~5s
• 所有文字满足字号底线：1080p 下标题 32px、标签 24px
• 颜色从当前 Playbook 调色板派生
• 关键数据点有视觉强调（高亮色、缩放或批注）
• 不单纯依赖颜色传义（标签 + 纹理保证可访问性）
• 条形图 Y 轴从 0 开始
• 无 3D 效果或透视扭曲
• 标题可见且具描述性
• 使用外部数据时注明来源
• 停留期间任意一帧暂停时图表均可读

延伸阅读

• 技能文档原文：skills/creative/data-visualization.md
• 图表生成工具实现：tools/graphics/diagram_gen.py
• Remotion 图表组件：remotion-composer/src/components/charts/BarChart.tsx、LineChart.tsx、KPIGrid.tsx
• Playbook 加载与可访问性校验：styles/playbook_loader.py、schemas/styles/playbook.schema.json
• 预置样式示例：styles/clean-professional.yaml
• Remotion 合成引擎路由：skills/core/remotion.md
• 相关设计技能：skills/creative/typography.md、skills/creative/enhancement-strategy.md

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage