Reflex Area Chart 完全指南用纯 Python 构建 Recharts 面积图【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex导读本文围绕 Reflex 框架的rx.recharts.area_chart与rx.recharts.area组件系统讲解如何在纯 Python 中构建基于 Recharts 的面积图Area Chart从最基础的单系列面积图到图表联动同步、堆叠面积图、SVG 线性渐变填充、多坐标轴组合以及带 State 的交互式动态图表。读完本文你将掌握面积图组件的全部核心用法并能结合仓库源码理解其底层封装原理直接在你的 Reflex 应用中落地使用。Reflex 的面积图组件是对 Recharts 与 cartesian.py其中Recharts基类声明了底层依赖recharts3.10.1见 recharts.py。基本示例创建第一个面积图面积图的核心结构非常简单area_chart作为容器内部放入一个或多个area数据系列、x_axis与y_axis坐标轴最后通过data参数传入数据源。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_simple(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), datadata, width100%, height250, )要点说明data_key指定该面积系列从数据字典中读取的字段如上例读取uv列rx.recharts.x_axis(data_keyname)将name字段映射为横轴分类y_axis不指定data_key时由图表自动计算数值域width与height用于控制图表尺寸。关于尺寸参数源码中有一处值得注意的细节ChartBase.create会校验width/height只能是整数像素值或以%结尾的百分比字符串其他 CSS 单位会被拒绝并抛出ValueError同时会强制设置min_height/min_width为 10防止图表因容器未初始化而塌陷不可见随后自动将图表包装进ResponsiveContainer见 charts.py。因此你在页面中设置width100%即可获得随容器自适应的响应式图表。Area 组件的常用属性源码级参考在 cartesian.py 中Area组件的关键属性及默认值如下属性默认值说明data_key—数据中对应的字段名必填type_monotone曲线插值类型详见下文曲线类型strokerx.color(accent, 9)线条描边颜色fillrx.color(accent, 5)区域填充颜色stroke_width1线条宽度dotFalse是否绘制数据点active_dot{stroke: rx.color(accent, 2), fill: rx.color(accent, 10)}悬浮 tooltip 时显示的高亮点stack_id—堆叠分组 ID相同则纵向堆叠connect_nullsFalse是否跨空值点连线base_value图表级auto面积基准值可为Number、dataMin、dataMax、autotype_的曲线类型在 recharts.py 中定义为LiteralCurveType完整取值包括basis、basisClosed、basisOpen、bumpX、bumpY、bump、linear、linearClosed、natural、monotoneX、monotoneY、monotone、step、stepBefore、stepAfter也可传入自定义插值函数。图表联动同步sync_id 与 sync_methodsync_id属性可以让两个或多个图表共享交互状态。只要两个分类图表area_chart、line_chart、bar_chart、composed_chart设置了相同的sync_id它们在同步 tooltip 位置以及Brush 的起始/结束索引上就会保持一致——在一个图表上的操作如刷选、悬浮会实时反映到另一个图表上。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_sync(): return rx.vstack( rx.recharts.bar_chart( rx.recharts.graphing_tooltip(), rx.recharts.bar(data_keyuv, stroke#8884d8, fill#8884d8), rx.recharts.bar( data_keypv, stroke#82ca9d, fill#82ca9d, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), datadata, sync_id1, width100%, height200, ), rx.recharts.composed_chart( rx.recharts.area(data_keyuv, stroke#8884d8, fill#8884d8), rx.recharts.line( data_keypv, type_monotone, stroke#ff7300, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), rx.recharts.graphing_tooltip(), rx.recharts.brush(data_keyname, height30, stroke#8884d8), datadata, sync_id1, width100%, height250, ), width100%, )源码层面sync_id与sync_method定义在CategoricalChartBase中见 charts.pysync_id任意两个分类图表设置相同 ID 即建立同步sync_method默认index即其他图表复用当前数据点在数据数组中的索引若多个图表的数据长度不一致可能产生意外结果此时应改用value——按数值去匹配其他图表的数据点也可传入自定义函数(tick, data) - index源码中的类型定义为LiteralSyncMethod Literal[index, value]。堆叠面积图stack_id 与 stack_offsetstack_id用于将多个面积系列在纵向堆叠设置了相同stack_id的多个area会依次叠放每个系列的值贡献到堆叠总高度上。它与sync_id的区别在于sync_id同步的是交互而stack_id只负责布局堆叠。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_stack(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, strokerx.color(accent, 9), fillrx.color(accent, 8), stack_id1, ), rx.recharts.area( data_keypv, strokerx.color(green, 9), fillrx.color(green, 8), stack_id1, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), datadata, stack_offsetnone, margin{top: 5, right: 5, bottom: 5, left: 5}, width100%, height300, )其中stack_offset控制堆叠的偏移函数源自 d3-shape 的内置 offset类型定义见 recharts.pyLiteralStackOffset Literal[expand, none, wiggle, silhouette]。取值效果none不做偏移处理直接按原始值堆叠默认expand按比例归一化堆叠总高恒为 1用于观察占比wiggle以最小化波动streamgraph 风格进行堆叠silhouette以中心对称方式堆叠河流图风格margin参数用于设置图表四周留白格式为{top: ..., right: ..., left: ..., bottom: ...}。官方建议始终为图表四周保留边距以保证图形与坐标轴之间有足够的呼吸空间、提升可读性。渐变填充用 SVG 线性渐变实现淡出效果SVG 线性渐变linear gradient可以让面积填充呈现平滑的渐隐效果。做法分两步先在rx.el.svg.defs中定义渐变作为图表的第一个子元素再通过fillurl(#gradient-id)从area引用它。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_gradient(): return rx.recharts.area_chart( rx.el.svg.defs( rx.el.svg.linear_gradient( rx.el.svg.stop(offset5%, stop_color#8884d8, stop_opacity0.8), rx.el.svg.stop(offset95%, stop_color#8884d8, stop_opacity0), idarea_gradient, x10, x20, y10, y21, ), ), rx.recharts.area( data_keyuv, stroke#8884d8, fillurl(#area_gradient), type_natural, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), rx.recharts.graphing_tooltip(), datadata, width100%, height300, )关键点渐变的id必须与fillurl(#area_gradient)中引用的 ID 一致上例中y10, y21表示渐变方向为自上而下起始点顶部不透明度 0.8结束点底部不透明度 0形成经典的淡出效果若要横向渐变则改为设置x1/x2rx.el.svg.defs必须作为图表的第一个子元素否则渐变定义无法被后续area正确解析渐变示例中还配合了type_natural曲线展示不同插值风格的组合效果。多坐标轴让不同量纲的数据共处一图当同一张图中需要展示量纲或数值范围差异巨大的多个数据系列时可以启用多坐标轴。每个area通过x_axis_id/y_axis_id声明自己归属的坐标轴再分别定义对应 ID 的x_axis/y_axis即可让不同系列使用各自独立的刻度。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_multi_axis(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, stroke#8884d8, fill#8884d8, x_axis_idprimary, y_axis_idleft, ), rx.recharts.area( data_keypv, x_axis_idsecondary, y_axis_idright, type_monotone, stroke#82ca9d, fill#82ca9d, ), rx.recharts.x_axis(data_keyname, x_axis_idprimary), rx.recharts.x_axis(data_keyname, x_axis_idsecondary, orientationtop), rx.recharts.y_axis(data_keyuv, y_axis_idleft), rx.recharts.y_axis(data_keypv, y_axis_idright, orientationright), rx.recharts.graphing_tooltip(), rx.recharts.legend(), datadata, width100%, height300, )源码依据见 cartesian.pyXAxis.x_axis_id与YAxis.y_axis_id默认值均为0用于将坐标轴与数据系列对应XAxis.orientation可选top/bottom默认bottomYAxis.orientation可选left/right默认leftArea组件同样具备x_axis_id与y_axis_id默认0通过系列-轴ID 匹配建立映射。上例中uv系列挂在左侧主轴上pv系列挂在右侧副轴上两条横轴分别位于底部与顶部从而让两组不同量级的数据在同一图表内清晰对比。此外坐标轴还支持大量细粒度定制同样定义于Axis基类见 cartesian.pytype_number/category、scalelinear、log、pow、time、band等十余种默认auto、domain值域范围默认[0, auto]常与allow_data_overflow配合、unit数值单位、tick_count刻度数量默认 5、interval、mirror、reversed、label等可按需查阅。布局方向横向与纵向面积图通过layout属性可以切换面积图的方向可选horizontal默认或vertical。类型定义见 recharts.pyLiteralLayout Literal[horizontal, vertical]。纵向布局时横轴变为数值轴、纵轴变为分类轴适合展示需要按分类纵向排列的长列表数据import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_vertical(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, strokerx.color(accent, 8), fillrx.color(accent, 3), ), rx.recharts.x_axis(type_number), rx.recharts.y_axis(data_keyname, type_category), datadata, layoutvertical, height300, width100%, )注意纵向布局下轴的角色互换x_axis指定type_number作为数值轴y_axis指定data_keyname与type_category作为分类轴。提示无论横向还是纵向请始终为图表四周设置边距margin保证图形与轴标签之间有合理的间距增强可读性。带 State 的交互式面积图面积图组件支持与 Reflex State 深度集成数据可以来自 State 的变量dataAreaState.data系列属性可以绑定 State 字段如type_AreaState.curve_type还可以通过on_click等事件触发器调用 State 方法实现点击随机化数据、切换曲线类型等动态交互。import reflex as rx import random class AreaState(rx.State): data data # 复用上文定义的数据集 curve_type rx.event def randomize_data(self): for i in range(len(self.data)): self.data[i][uv] random.randint(0, 10000) self.data[i][pv] random.randint(0, 10000) self.data[i][amt] random.randint(0, 10000) def change_curve_type(self, type_input): self.curve_type type_input def area_stateful(): return rx.vstack( rx.hstack( rx.text(Curve Type:), rx.select( [basis, natural, step], on_changeAreaState.change_curve_type, default_valuebasis, ), ), rx.recharts.area_chart( rx.recharts.area( data_keyuv, on_clickAreaState.randomize_data, type_AreaState.curve_type, ), rx.recharts.area( data_keypv, stroke#82ca9d, fill#82ca9d, on_clickAreaState.randomize_data, type_AreaState.curve_type, ), rx.recharts.x_axis( data_keyname, ), rx.recharts.y_axis(), rx.recharts.legend(), rx.recharts.cartesian_grid(), dataAreaState.data, width100%, height400, ), width100%, )交互逻辑拆解点击随机化area上通过on_clickAreaState.randomize_data绑定事件处理器randomize_data由rx.event装饰。点击面积图区域时State 会遍历self.data并随机重写uv/pv/amt三个字段图表随之自动刷新动态切换曲线类型rx.select的下拉选项[basis, natural, step]通过on_change触发change_curve_type将选择结果写入self.curve_type两个area的type_都绑定AreaState.curve_type因此切换下拉框即可实时改变曲线插值风格配套元素rx.recharts.legend()渲染图例rx.recharts.cartesian_grid()绘制笛卡尔网格线horizontal与vertical网格线开关默认均为True见 cartesian.py。ChartBase还统一提供了on_click、on_mouse_enter、on_mouse_move、on_mouse_leave四个图表级事件触发器见 charts.pyArea及Legend、GraphingTooltip等组件也各自暴露了对应的事件处理器可用于构建更丰富的交互。常用配套组件速查rx.recharts.graphing_tooltip()悬浮提示框默认样式已与 Reflex 主题对齐内容区圆角8px、背景rx.color(gray, 1)、边框rx.color(gray, 4)见 general.py支持separator名称与值之间的分隔符默认:、offset、cursor、filter_null等配置rx.recharts.legend()图例支持layouthorizontal/vertical、alignleft/center/right、vertical_aligntop/middle/bottom、icon_type、icon_size等见 general.pyrx.recharts.brush()刷选器支持data_key、height、stroke等配合sync_id可跨图表联动刷选范围。验证与测试仓库的 Playwright 集成测试对面积图渲染有直接覆盖tests/integration/tests_playwright/test_recharts.py中的test_area_chart断言了图表挂载后.recharts-surface可见、且.recharts-area-area面积填充路径恰好渲染 1 个验证了rx.recharts.area_chart能正确输出 Recharts 面积图结构见 test_recharts.py。这从端到端角度印证了本文所有示例的组件组合方式是有效的。相关图表Reflex 的 Recharts 图表库包含多种图表类型可与面积图自由组合使用全部以纯 Python 构建Line Chart — 折线图Bar Chart — 柱状图Composed Chart — 组合图可在同一图表中混用面积、折线与柱状系列面积图组件支持的所有图表级属性data、margin、sync_id、sync_method、layout、stack_offset、base_value等可在 charts.py 中查阅完整定义Area、坐标轴、图例与提示框的细节属性可进一步阅读 cartesian.py 与 general.py以便按需定制属于自己的数据可视化方案。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Reflex Area Chart 完全指南：用纯 Python 构建 Recharts 面积图
Reflex Area Chart 完全指南用纯 Python 构建 Recharts 面积图【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex导读本文围绕 Reflex 框架的rx.recharts.area_chart与rx.recharts.area组件系统讲解如何在纯 Python 中构建基于 Recharts 的面积图Area Chart从最基础的单系列面积图到图表联动同步、堆叠面积图、SVG 线性渐变填充、多坐标轴组合以及带 State 的交互式动态图表。读完本文你将掌握面积图组件的全部核心用法并能结合仓库源码理解其底层封装原理直接在你的 Reflex 应用中落地使用。Reflex 的面积图组件是对 Recharts 与 cartesian.py其中Recharts基类声明了底层依赖recharts3.10.1见 recharts.py。基本示例创建第一个面积图面积图的核心结构非常简单area_chart作为容器内部放入一个或多个area数据系列、x_axis与y_axis坐标轴最后通过data参数传入数据源。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_simple(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), datadata, width100%, height250, )要点说明data_key指定该面积系列从数据字典中读取的字段如上例读取uv列rx.recharts.x_axis(data_keyname)将name字段映射为横轴分类y_axis不指定data_key时由图表自动计算数值域width与height用于控制图表尺寸。关于尺寸参数源码中有一处值得注意的细节ChartBase.create会校验width/height只能是整数像素值或以%结尾的百分比字符串其他 CSS 单位会被拒绝并抛出ValueError同时会强制设置min_height/min_width为 10防止图表因容器未初始化而塌陷不可见随后自动将图表包装进ResponsiveContainer见 charts.py。因此你在页面中设置width100%即可获得随容器自适应的响应式图表。Area 组件的常用属性源码级参考在 cartesian.py 中Area组件的关键属性及默认值如下属性默认值说明data_key—数据中对应的字段名必填type_monotone曲线插值类型详见下文曲线类型strokerx.color(accent, 9)线条描边颜色fillrx.color(accent, 5)区域填充颜色stroke_width1线条宽度dotFalse是否绘制数据点active_dot{stroke: rx.color(accent, 2), fill: rx.color(accent, 10)}悬浮 tooltip 时显示的高亮点stack_id—堆叠分组 ID相同则纵向堆叠connect_nullsFalse是否跨空值点连线base_value图表级auto面积基准值可为Number、dataMin、dataMax、autotype_的曲线类型在 recharts.py 中定义为LiteralCurveType完整取值包括basis、basisClosed、basisOpen、bumpX、bumpY、bump、linear、linearClosed、natural、monotoneX、monotoneY、monotone、step、stepBefore、stepAfter也可传入自定义插值函数。图表联动同步sync_id 与 sync_methodsync_id属性可以让两个或多个图表共享交互状态。只要两个分类图表area_chart、line_chart、bar_chart、composed_chart设置了相同的sync_id它们在同步 tooltip 位置以及Brush 的起始/结束索引上就会保持一致——在一个图表上的操作如刷选、悬浮会实时反映到另一个图表上。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_sync(): return rx.vstack( rx.recharts.bar_chart( rx.recharts.graphing_tooltip(), rx.recharts.bar(data_keyuv, stroke#8884d8, fill#8884d8), rx.recharts.bar( data_keypv, stroke#82ca9d, fill#82ca9d, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), datadata, sync_id1, width100%, height200, ), rx.recharts.composed_chart( rx.recharts.area(data_keyuv, stroke#8884d8, fill#8884d8), rx.recharts.line( data_keypv, type_monotone, stroke#ff7300, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), rx.recharts.graphing_tooltip(), rx.recharts.brush(data_keyname, height30, stroke#8884d8), datadata, sync_id1, width100%, height250, ), width100%, )源码层面sync_id与sync_method定义在CategoricalChartBase中见 charts.pysync_id任意两个分类图表设置相同 ID 即建立同步sync_method默认index即其他图表复用当前数据点在数据数组中的索引若多个图表的数据长度不一致可能产生意外结果此时应改用value——按数值去匹配其他图表的数据点也可传入自定义函数(tick, data) - index源码中的类型定义为LiteralSyncMethod Literal[index, value]。堆叠面积图stack_id 与 stack_offsetstack_id用于将多个面积系列在纵向堆叠设置了相同stack_id的多个area会依次叠放每个系列的值贡献到堆叠总高度上。它与sync_id的区别在于sync_id同步的是交互而stack_id只负责布局堆叠。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_stack(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, strokerx.color(accent, 9), fillrx.color(accent, 8), stack_id1, ), rx.recharts.area( data_keypv, strokerx.color(green, 9), fillrx.color(green, 8), stack_id1, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), datadata, stack_offsetnone, margin{top: 5, right: 5, bottom: 5, left: 5}, width100%, height300, )其中stack_offset控制堆叠的偏移函数源自 d3-shape 的内置 offset类型定义见 recharts.pyLiteralStackOffset Literal[expand, none, wiggle, silhouette]。取值效果none不做偏移处理直接按原始值堆叠默认expand按比例归一化堆叠总高恒为 1用于观察占比wiggle以最小化波动streamgraph 风格进行堆叠silhouette以中心对称方式堆叠河流图风格margin参数用于设置图表四周留白格式为{top: ..., right: ..., left: ..., bottom: ...}。官方建议始终为图表四周保留边距以保证图形与坐标轴之间有足够的呼吸空间、提升可读性。渐变填充用 SVG 线性渐变实现淡出效果SVG 线性渐变linear gradient可以让面积填充呈现平滑的渐隐效果。做法分两步先在rx.el.svg.defs中定义渐变作为图表的第一个子元素再通过fillurl(#gradient-id)从area引用它。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_gradient(): return rx.recharts.area_chart( rx.el.svg.defs( rx.el.svg.linear_gradient( rx.el.svg.stop(offset5%, stop_color#8884d8, stop_opacity0.8), rx.el.svg.stop(offset95%, stop_color#8884d8, stop_opacity0), idarea_gradient, x10, x20, y10, y21, ), ), rx.recharts.area( data_keyuv, stroke#8884d8, fillurl(#area_gradient), type_natural, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), rx.recharts.graphing_tooltip(), datadata, width100%, height300, )关键点渐变的id必须与fillurl(#area_gradient)中引用的 ID 一致上例中y10, y21表示渐变方向为自上而下起始点顶部不透明度 0.8结束点底部不透明度 0形成经典的淡出效果若要横向渐变则改为设置x1/x2rx.el.svg.defs必须作为图表的第一个子元素否则渐变定义无法被后续area正确解析渐变示例中还配合了type_natural曲线展示不同插值风格的组合效果。多坐标轴让不同量纲的数据共处一图当同一张图中需要展示量纲或数值范围差异巨大的多个数据系列时可以启用多坐标轴。每个area通过x_axis_id/y_axis_id声明自己归属的坐标轴再分别定义对应 ID 的x_axis/y_axis即可让不同系列使用各自独立的刻度。import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_multi_axis(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, stroke#8884d8, fill#8884d8, x_axis_idprimary, y_axis_idleft, ), rx.recharts.area( data_keypv, x_axis_idsecondary, y_axis_idright, type_monotone, stroke#82ca9d, fill#82ca9d, ), rx.recharts.x_axis(data_keyname, x_axis_idprimary), rx.recharts.x_axis(data_keyname, x_axis_idsecondary, orientationtop), rx.recharts.y_axis(data_keyuv, y_axis_idleft), rx.recharts.y_axis(data_keypv, y_axis_idright, orientationright), rx.recharts.graphing_tooltip(), rx.recharts.legend(), datadata, width100%, height300, )源码依据见 cartesian.pyXAxis.x_axis_id与YAxis.y_axis_id默认值均为0用于将坐标轴与数据系列对应XAxis.orientation可选top/bottom默认bottomYAxis.orientation可选left/right默认leftArea组件同样具备x_axis_id与y_axis_id默认0通过系列-轴ID 匹配建立映射。上例中uv系列挂在左侧主轴上pv系列挂在右侧副轴上两条横轴分别位于底部与顶部从而让两组不同量级的数据在同一图表内清晰对比。此外坐标轴还支持大量细粒度定制同样定义于Axis基类见 cartesian.pytype_number/category、scalelinear、log、pow、time、band等十余种默认auto、domain值域范围默认[0, auto]常与allow_data_overflow配合、unit数值单位、tick_count刻度数量默认 5、interval、mirror、reversed、label等可按需查阅。布局方向横向与纵向面积图通过layout属性可以切换面积图的方向可选horizontal默认或vertical。类型定义见 recharts.pyLiteralLayout Literal[horizontal, vertical]。纵向布局时横轴变为数值轴、纵轴变为分类轴适合展示需要按分类纵向排列的长列表数据import reflex as rx data [ {name: Page A, uv: 4000, pv: 2400, amt: 2400}, {name: Page B, uv: 3000, pv: 1398, amt: 2210}, {name: Page C, uv: 2000, pv: 9800, amt: 2290}, {name: Page D, uv: 2780, pv: 3908, amt: 2000}, {name: Page E, uv: 1890, pv: 4800, amt: 2181}, {name: Page F, uv: 2390, pv: 3800, amt: 2500}, {name: Page G, uv: 3490, pv: 4300, amt: 2100}, ] def area_vertical(): return rx.recharts.area_chart( rx.recharts.area( data_keyuv, strokerx.color(accent, 8), fillrx.color(accent, 3), ), rx.recharts.x_axis(type_number), rx.recharts.y_axis(data_keyname, type_category), datadata, layoutvertical, height300, width100%, )注意纵向布局下轴的角色互换x_axis指定type_number作为数值轴y_axis指定data_keyname与type_category作为分类轴。提示无论横向还是纵向请始终为图表四周设置边距margin保证图形与轴标签之间有合理的间距增强可读性。带 State 的交互式面积图面积图组件支持与 Reflex State 深度集成数据可以来自 State 的变量dataAreaState.data系列属性可以绑定 State 字段如type_AreaState.curve_type还可以通过on_click等事件触发器调用 State 方法实现点击随机化数据、切换曲线类型等动态交互。import reflex as rx import random class AreaState(rx.State): data data # 复用上文定义的数据集 curve_type rx.event def randomize_data(self): for i in range(len(self.data)): self.data[i][uv] random.randint(0, 10000) self.data[i][pv] random.randint(0, 10000) self.data[i][amt] random.randint(0, 10000) def change_curve_type(self, type_input): self.curve_type type_input def area_stateful(): return rx.vstack( rx.hstack( rx.text(Curve Type:), rx.select( [basis, natural, step], on_changeAreaState.change_curve_type, default_valuebasis, ), ), rx.recharts.area_chart( rx.recharts.area( data_keyuv, on_clickAreaState.randomize_data, type_AreaState.curve_type, ), rx.recharts.area( data_keypv, stroke#82ca9d, fill#82ca9d, on_clickAreaState.randomize_data, type_AreaState.curve_type, ), rx.recharts.x_axis( data_keyname, ), rx.recharts.y_axis(), rx.recharts.legend(), rx.recharts.cartesian_grid(), dataAreaState.data, width100%, height400, ), width100%, )交互逻辑拆解点击随机化area上通过on_clickAreaState.randomize_data绑定事件处理器randomize_data由rx.event装饰。点击面积图区域时State 会遍历self.data并随机重写uv/pv/amt三个字段图表随之自动刷新动态切换曲线类型rx.select的下拉选项[basis, natural, step]通过on_change触发change_curve_type将选择结果写入self.curve_type两个area的type_都绑定AreaState.curve_type因此切换下拉框即可实时改变曲线插值风格配套元素rx.recharts.legend()渲染图例rx.recharts.cartesian_grid()绘制笛卡尔网格线horizontal与vertical网格线开关默认均为True见 cartesian.py。ChartBase还统一提供了on_click、on_mouse_enter、on_mouse_move、on_mouse_leave四个图表级事件触发器见 charts.pyArea及Legend、GraphingTooltip等组件也各自暴露了对应的事件处理器可用于构建更丰富的交互。常用配套组件速查rx.recharts.graphing_tooltip()悬浮提示框默认样式已与 Reflex 主题对齐内容区圆角8px、背景rx.color(gray, 1)、边框rx.color(gray, 4)见 general.py支持separator名称与值之间的分隔符默认:、offset、cursor、filter_null等配置rx.recharts.legend()图例支持layouthorizontal/vertical、alignleft/center/right、vertical_aligntop/middle/bottom、icon_type、icon_size等见 general.pyrx.recharts.brush()刷选器支持data_key、height、stroke等配合sync_id可跨图表联动刷选范围。验证与测试仓库的 Playwright 集成测试对面积图渲染有直接覆盖tests/integration/tests_playwright/test_recharts.py中的test_area_chart断言了图表挂载后.recharts-surface可见、且.recharts-area-area面积填充路径恰好渲染 1 个验证了rx.recharts.area_chart能正确输出 Recharts 面积图结构见 test_recharts.py。这从端到端角度印证了本文所有示例的组件组合方式是有效的。相关图表Reflex 的 Recharts 图表库包含多种图表类型可与面积图自由组合使用全部以纯 Python 构建Line Chart — 折线图Bar Chart — 柱状图Composed Chart — 组合图可在同一图表中混用面积、折线与柱状系列面积图组件支持的所有图表级属性data、margin、sync_id、sync_method、layout、stack_offset、base_value等可在 charts.py 中查阅完整定义Area、坐标轴、图例与提示框的细节属性可进一步阅读 cartesian.py 与 general.py以便按需定制属于自己的数据可视化方案。【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
