Reflex 漏斗图Funnel Chart完全指南用纯 Python 构建 Recharts 转化漏斗【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex漏斗图Funnel Chart是可视化业务流程中各阶段数据逐级衰减的经典图表上一阶段的数值在本阶段递减天然适合展示用户转化、销售漏斗等场景。在 Reflex 中你可以完全使用纯 Python 基于 Recharts 展开并结合仓库中reflex-components-recharts包的源码实现带你掌握漏斗图的组件结构、事件交互、动态数据绑定与动画配置读完后可直接在自己的 Reflex 应用中落地一个可交互的转化漏斗。漏斗图组件体系FunnelChartFunnelReflex 对 Recharts 漏斗图的封装由两个核心组件组成见 charts.py 与 cartesian.pyrx.recharts.funnel_chart外层图表容器对应FunnelChart类Recharts 标签FunnelChart负责整体布局、尺寸与事件rx.recharts.funnel内层漏斗序列对应Funnel类Recharts 标签Funnel负责接收数据、绑定data_key并支持动画与系列级事件。从源码看FunnelChart继承自ChartBasecharts.py后者对width/height做了严格校验只接受整数像素或百分比字符串如100%传入其他 CSS 单位会抛出ValueError。因此宽度、高度务必按此规则书写。此外FunnelChart还暴露了layout默认centric控制漏斗中条形的布局方式与margin默认{top: 5, right: 5, bottom: 5, left: 5}控制图表四周留白两个容器级配置。FunnelChart允许的子组件包括Legend、GraphingTooltip、Funnel、Defs、Layer、Rectangle而Funnel的子组件为LabelList与Cell其中LabelList用于在漏斗每一层上绘制名称或数值标签Cell可对单个漏斗块做精细化样式覆盖。两个组件均以create类方法暴露为便捷函数见 charts.py 与 general.py所以你始终可以写成rx.recharts.funnel_chart(...)与rx.recharts.funnel(...)的链式调用形式。简单示例五分钟搭起第一个漏斗图漏斗数据是一组字典列表每个字典至少包含name阶段名与value阶段数值并可用fill为该阶段指定颜色。下面的例子模拟了从发送到购买的电商转化链路data [ {value: 100, name: Sent, fill: #8884d8}, {value: 80, name: Viewed, fill: #83a6ed}, {value: 50, name: Clicked, fill: #8dd1e1}, {value: 40, name: Add to Cart, fill: #82ca9d}, {value: 26, name: Purchased, fill: #a4de6c}, ] def funnel_simple(): return rx.recharts.funnel_chart( rx.recharts.funnel( rx.recharts.label_list( positionright, data_keyname, fill#000, strokenone, ), data_keyvalue, datadata, ), width100%, height250, )要点拆解data_keyvalue告诉Funnel从数据字典中取哪个键作为漏斗数值对应源码中Funnel.data与Funnel.data_key两个属性cartesian.py。内嵌rx.recharts.label_listLabelList时position支持top、left、right、bottom、inside、outside、insideLeft、insideRight、insideTop、insideBottom、center、end等取值data_key指定标签显示哪个字段fill/stroke控制文字颜色与描边默认分别为rx.color(gray, 10)与none见 general.py。上例将阶段名称绘制在每一层的右侧。容器尺寸width100%、height250宽度是百分比字符串、高度是整数像素完全符合ChartBase的维度校验规则。事件触发让漏斗图响应用户操作FunnelChart与Funnel均支持事件绑定。从源码的EventTrigger声明可以看到charts.py 与 cartesian.py可用的交互事件包括on_click点击图表或漏斗触发on_mouse_enter/on_mouse_leave鼠标进入 / 离开时触发on_mouse_move鼠标移动时触发此外Funnel还支持on_mouse_down、on_mouse_up、on_mouse_over、on_mouse_out以及on_animation_start、on_animation_end动画开始 / 结束回调。下面的示例把事件与 Reflex 的rx.toast通知机制结合实现点击弹提示的即时反馈data [ {value: 100, name: Sent, fill: #8884d8}, {value: 80, name: Viewed, fill: #83a6ed}, {value: 50, name: Clicked, fill: #8dd1e1}, {value: 40, name: Add to Cart, fill: #82ca9d}, {value: 26, name: Purchased, fill: #a4de6c}, ] def funnel_events(): return rx.recharts.funnel_chart( rx.recharts.funnel( rx.recharts.label_list( positionright, data_keyname, fill#000, strokenone, ), data_keyvalue, datadata, ), on_clickrx.toast(Clicked on funnel chart), on_mouse_enterrx.toast(Mouse entered), on_mouse_leaverx.toast(Mouse left), width100%, height250, )注意使用rx.toast前需要在页面或应用顶部放置rx.toast.provider()对应文档示例中的rx.toast.provider()调用否则提示无法渲染。事件回调也可以替换成任意 Reflex 事件处理器EventHandler例如跳转页面、更新状态等。动态数据用 State 驱动漏斗实时更新漏斗图的数据完全可以来自 ReflexState实现数据变化 → 图表重绘的响应式更新。下例中FunnelState.data作为漏斗数据源randomize_data事件处理器在每次点击时对数据重新计算首阶段固定为 100后续每个阶段在上一阶段基础上随机递减 020从而模拟转化率波动import reflex as rx import random data [ {value: 100, name: Sent, fill: #8884d8}, {value: 80, name: Viewed, fill: #83a6ed}, {value: 50, name: Clicked, fill: #8dd1e1}, {value: 40, name: Add to Cart, fill: #82ca9d}, {value: 26, name: Purchased, fill: #a4de6c}, ] class FunnelState(rx.State): data data rx.event def randomize_data(self): self.data[0][value] 100 for i in range(len(self.data) - 1): self.data[i 1][value] self.data[i][value] - random.randint(0, 20) def funnel_state(): return rx.recharts.funnel_chart( rx.recharts.funnel( rx.recharts.label_list( positionright, data_keyname, fill#000, strokenone, ), data_keyvalue, dataFunnelState.data, on_clickFunnelState.randomize_data, ), rx.recharts.graphing_tooltip(), width100%, height250, )这个例子同时引入了rx.recharts.graphing_tooltip()GraphingTooltip对应 RechartsTooltip组件它会在鼠标悬停时展示当前阶段的名称与数值详情。从源码看Reflex 为其内置了一套与主题联动的默认样式general.py背景色rx.color(gray, 1)、边框色rx.color(gray, 4)、圆角 8px、标签色rx.color(gray, 11)、条目文字色rx.color(gray, 12)并默认过滤空值filter_nullTrue。这意味着无需额外配置工具提示即可与你的应用主题保持一致。动画配置控制漏斗的入场与过渡Funnel系列组件原生支持图表动画相关属性在 cartesian.py 中定义含义与默认值如下属性作用默认值is_animation_active是否启用动画Trueanimation_begin动画开始的延迟时间毫秒0animation_duration动画持续时长毫秒1500animation_easing动画速度曲线ease其中animation_easing可选ease、ease-in、ease-out、ease-in-out、linear。下面的配置让漏斗数据变化时呈现先慢后快再慢的平滑过渡并刻意拉长到 9 秒以便观察data [ {name: Visits, value: 5000, fill: #8884d8}, {name: Cart, value: 3000, fill: #83a6ed}, {name: Checkout, value: 2500, fill: #8dd1e1}, {name: Purchase, value: 1000, fill: #82ca9d}, ] def funnel_animation(): return rx.recharts.funnel_chart( rx.recharts.funnel( data_keyvalue, datadata, animation_begin300, animation_duration9000, animation_easingease-in-out, ), rx.recharts.graphing_tooltip(), rx.recharts.legend(), width100%, height300, )此处还组合了rx.recharts.legend()Legend展示各阶段名称的图例其legend_type属性可控制图例图标样式默认line设为none则不渲染图例项。Funnel还支持on_animation_start与on_animation_end事件可在动画生命周期节点上挂载自定义逻辑。使用前提与注意事项本文所有代码依赖 Reflex 项目中的 Recharts 封装使用前需在rxconfig.py所在项目中安装并启用对应组件包仓库中对应实现位于 reflex-components-recharts。funnel_chart、funnel、label_list、graphing_tooltip、legend均从reflex_components_recharts包导出见init.py实际使用中统一通过rx.recharts.*命名空间访问。图表宽高遵循ChartBase._ensure_valid_dimension的校验逻辑仅接受整数像素或百分比字符串若在响应式容器中自适应建议使用100%。数据字典中的name与value键是 Recharts 漏斗约定的字段名如使用自定义字段需通过data_key与name_key默认name显式指定。相关图表漏斗图只是 Reflex Recharts 纯 Python 图表体系中的一员你还可以继续探索其他常见图表类型Pie Chart饼图适合展示占比构成Bar Chart柱状图适合类别对比Composed Chart组合图在同一坐标系叠加多种图形。这些组件共享相同的组件树、事件系统与状态绑定模式掌握漏斗图后即可触类旁通。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Reflex 漏斗图（Funnel Chart）完全指南：用纯 Python 构建 Recharts 转化漏斗
Reflex 漏斗图Funnel Chart完全指南用纯 Python 构建 Recharts 转化漏斗【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex漏斗图Funnel Chart是可视化业务流程中各阶段数据逐级衰减的经典图表上一阶段的数值在本阶段递减天然适合展示用户转化、销售漏斗等场景。在 Reflex 中你可以完全使用纯 Python 基于 Recharts 展开并结合仓库中reflex-components-recharts包的源码实现带你掌握漏斗图的组件结构、事件交互、动态数据绑定与动画配置读完后可直接在自己的 Reflex 应用中落地一个可交互的转化漏斗。漏斗图组件体系FunnelChartFunnelReflex 对 Recharts 漏斗图的封装由两个核心组件组成见 charts.py 与 cartesian.pyrx.recharts.funnel_chart外层图表容器对应FunnelChart类Recharts 标签FunnelChart负责整体布局、尺寸与事件rx.recharts.funnel内层漏斗序列对应Funnel类Recharts 标签Funnel负责接收数据、绑定data_key并支持动画与系列级事件。从源码看FunnelChart继承自ChartBasecharts.py后者对width/height做了严格校验只接受整数像素或百分比字符串如100%传入其他 CSS 单位会抛出ValueError。因此宽度、高度务必按此规则书写。此外FunnelChart还暴露了layout默认centric控制漏斗中条形的布局方式与margin默认{top: 5, right: 5, bottom: 5, left: 5}控制图表四周留白两个容器级配置。FunnelChart允许的子组件包括Legend、GraphingTooltip、Funnel、Defs、Layer、Rectangle而Funnel的子组件为LabelList与Cell其中LabelList用于在漏斗每一层上绘制名称或数值标签Cell可对单个漏斗块做精细化样式覆盖。两个组件均以create类方法暴露为便捷函数见 charts.py 与 general.py所以你始终可以写成rx.recharts.funnel_chart(...)与rx.recharts.funnel(...)的链式调用形式。简单示例五分钟搭起第一个漏斗图漏斗数据是一组字典列表每个字典至少包含name阶段名与value阶段数值并可用fill为该阶段指定颜色。下面的例子模拟了从发送到购买的电商转化链路data [ {value: 100, name: Sent, fill: #8884d8}, {value: 80, name: Viewed, fill: #83a6ed}, {value: 50, name: Clicked, fill: #8dd1e1}, {value: 40, name: Add to Cart, fill: #82ca9d}, {value: 26, name: Purchased, fill: #a4de6c}, ] def funnel_simple(): return rx.recharts.funnel_chart( rx.recharts.funnel( rx.recharts.label_list( positionright, data_keyname, fill#000, strokenone, ), data_keyvalue, datadata, ), width100%, height250, )要点拆解data_keyvalue告诉Funnel从数据字典中取哪个键作为漏斗数值对应源码中Funnel.data与Funnel.data_key两个属性cartesian.py。内嵌rx.recharts.label_listLabelList时position支持top、left、right、bottom、inside、outside、insideLeft、insideRight、insideTop、insideBottom、center、end等取值data_key指定标签显示哪个字段fill/stroke控制文字颜色与描边默认分别为rx.color(gray, 10)与none见 general.py。上例将阶段名称绘制在每一层的右侧。容器尺寸width100%、height250宽度是百分比字符串、高度是整数像素完全符合ChartBase的维度校验规则。事件触发让漏斗图响应用户操作FunnelChart与Funnel均支持事件绑定。从源码的EventTrigger声明可以看到charts.py 与 cartesian.py可用的交互事件包括on_click点击图表或漏斗触发on_mouse_enter/on_mouse_leave鼠标进入 / 离开时触发on_mouse_move鼠标移动时触发此外Funnel还支持on_mouse_down、on_mouse_up、on_mouse_over、on_mouse_out以及on_animation_start、on_animation_end动画开始 / 结束回调。下面的示例把事件与 Reflex 的rx.toast通知机制结合实现点击弹提示的即时反馈data [ {value: 100, name: Sent, fill: #8884d8}, {value: 80, name: Viewed, fill: #83a6ed}, {value: 50, name: Clicked, fill: #8dd1e1}, {value: 40, name: Add to Cart, fill: #82ca9d}, {value: 26, name: Purchased, fill: #a4de6c}, ] def funnel_events(): return rx.recharts.funnel_chart( rx.recharts.funnel( rx.recharts.label_list( positionright, data_keyname, fill#000, strokenone, ), data_keyvalue, datadata, ), on_clickrx.toast(Clicked on funnel chart), on_mouse_enterrx.toast(Mouse entered), on_mouse_leaverx.toast(Mouse left), width100%, height250, )注意使用rx.toast前需要在页面或应用顶部放置rx.toast.provider()对应文档示例中的rx.toast.provider()调用否则提示无法渲染。事件回调也可以替换成任意 Reflex 事件处理器EventHandler例如跳转页面、更新状态等。动态数据用 State 驱动漏斗实时更新漏斗图的数据完全可以来自 ReflexState实现数据变化 → 图表重绘的响应式更新。下例中FunnelState.data作为漏斗数据源randomize_data事件处理器在每次点击时对数据重新计算首阶段固定为 100后续每个阶段在上一阶段基础上随机递减 020从而模拟转化率波动import reflex as rx import random data [ {value: 100, name: Sent, fill: #8884d8}, {value: 80, name: Viewed, fill: #83a6ed}, {value: 50, name: Clicked, fill: #8dd1e1}, {value: 40, name: Add to Cart, fill: #82ca9d}, {value: 26, name: Purchased, fill: #a4de6c}, ] class FunnelState(rx.State): data data rx.event def randomize_data(self): self.data[0][value] 100 for i in range(len(self.data) - 1): self.data[i 1][value] self.data[i][value] - random.randint(0, 20) def funnel_state(): return rx.recharts.funnel_chart( rx.recharts.funnel( rx.recharts.label_list( positionright, data_keyname, fill#000, strokenone, ), data_keyvalue, dataFunnelState.data, on_clickFunnelState.randomize_data, ), rx.recharts.graphing_tooltip(), width100%, height250, )这个例子同时引入了rx.recharts.graphing_tooltip()GraphingTooltip对应 RechartsTooltip组件它会在鼠标悬停时展示当前阶段的名称与数值详情。从源码看Reflex 为其内置了一套与主题联动的默认样式general.py背景色rx.color(gray, 1)、边框色rx.color(gray, 4)、圆角 8px、标签色rx.color(gray, 11)、条目文字色rx.color(gray, 12)并默认过滤空值filter_nullTrue。这意味着无需额外配置工具提示即可与你的应用主题保持一致。动画配置控制漏斗的入场与过渡Funnel系列组件原生支持图表动画相关属性在 cartesian.py 中定义含义与默认值如下属性作用默认值is_animation_active是否启用动画Trueanimation_begin动画开始的延迟时间毫秒0animation_duration动画持续时长毫秒1500animation_easing动画速度曲线ease其中animation_easing可选ease、ease-in、ease-out、ease-in-out、linear。下面的配置让漏斗数据变化时呈现先慢后快再慢的平滑过渡并刻意拉长到 9 秒以便观察data [ {name: Visits, value: 5000, fill: #8884d8}, {name: Cart, value: 3000, fill: #83a6ed}, {name: Checkout, value: 2500, fill: #8dd1e1}, {name: Purchase, value: 1000, fill: #82ca9d}, ] def funnel_animation(): return rx.recharts.funnel_chart( rx.recharts.funnel( data_keyvalue, datadata, animation_begin300, animation_duration9000, animation_easingease-in-out, ), rx.recharts.graphing_tooltip(), rx.recharts.legend(), width100%, height300, )此处还组合了rx.recharts.legend()Legend展示各阶段名称的图例其legend_type属性可控制图例图标样式默认line设为none则不渲染图例项。Funnel还支持on_animation_start与on_animation_end事件可在动画生命周期节点上挂载自定义逻辑。使用前提与注意事项本文所有代码依赖 Reflex 项目中的 Recharts 封装使用前需在rxconfig.py所在项目中安装并启用对应组件包仓库中对应实现位于 reflex-components-recharts。funnel_chart、funnel、label_list、graphing_tooltip、legend均从reflex_components_recharts包导出见init.py实际使用中统一通过rx.recharts.*命名空间访问。图表宽高遵循ChartBase._ensure_valid_dimension的校验逻辑仅接受整数像素或百分比字符串若在响应式容器中自适应建议使用100%。数据字典中的name与value键是 Recharts 漏斗约定的字段名如使用自定义字段需通过data_key与name_key默认name显式指定。相关图表漏斗图只是 Reflex Recharts 纯 Python 图表体系中的一员你还可以继续探索其他常见图表类型Pie Chart饼图适合展示占比构成Bar Chart柱状图适合类别对比Composed Chart组合图在同一坐标系叠加多种图形。这些组件共享相同的组件树、事件系统与状态绑定模式掌握漏斗图后即可触类旁通。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考