渐进式谷歌财务报表可视化

演示财务可视化从基本树形布局到带有背景和图标的完全自定义区域样式图表的逐步演进。

渐进式谷歌财务报表可视化

功能概述

此示例演示财务报表可视化的逐步演进，从基本的树形布局开始，逐步添加自定义样式、数据驱动的高度、区域样式连接、偏移路径，最后添加动态背景和图标。

核心特性实现

分步版本

演示包括 6 个渐进版本：

• v1：带有财务数据的基本树形布局
• v2：通过 RGSlotOnNode 自定义节点样式
• v3：基于收入值的动态节点高度
• v4：使用 createAreaLinePath 的区域样式连线
• v5：用于比例连线高度的偏移路径
• final：动态背景和徽标图标

选项卡导航

在不同的演进步骤之间切换：

{['v1', 'v2', 'v3', 'v4', 'v5', 'final'].map((step, index) => (
    <div
        onClick={() => setStepName(step)}
        className={stepName === step ? 'bg-[#3058f8] text-white' : 'hover:bg-gray-200'}
    >
        Step {index + 1}
    </div>
))}

特定步骤的组件

每个版本使用具有递增复杂度的专用组件：

{stepName === 'v1' && <RGProvider><Step1Version /></RGProvider>}
{stepName === 'v2' && <RGProvider><Step2Version /></RGProvider>}
{stepName === 'final' && <RGProvider><StepFinalVersion /></RGProvider>}

创意使用场景

• 财务报告：创建令人印象深刻的损益表、资产负债表可视化
• 数据叙事：逐步引导用户了解数据转换
• 交互式教程：渐进式教授图表自定义技术
• 模板库：展示从基本到高级可视化的演进
• 客户演示：递增式展示自定义功能