Reflex 组合图（ComposedChart）完全指南：在纯 Python 中叠加柱状图、折线图与面积图

Reflex 组合图ComposedChart完全指南在纯 Python 中叠加柱状图、折线图与面积图【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflexReflex 的rx.recharts.composed_chart允许你在单个图表中组合柱状图bar、折线图line和面积图area所有系列共享同一份数据、坐标轴、提示框与图例全程无需编写任何 JavaScript。本文以官方文档 composedchart.md 为主体结合reflex-components-recharts包的源码与测试系统讲解组合图的核心概念、适用场景、基础示例、双轴实现以及底层实现原理读完即可在自己的 Reflex 应用中落地可运行的组合图。什么是 Composed ChartComposed chart组合图也叫 combo chart在 Reflex 中基于 Recharts一个 React 图表库封装而来但完全用纯 Python 创建。它本质上是一个高阶图表组件由多个子图表组合而成其他图表组件作为composed_chart的子组件children传入。各个子图表按照在rx.recharts.composed_chart()函数中提供的顺序依次叠加绘制——先传入的系列画在底层后传入的系列渲染在上层。在源码层面Reflex 将 Recharts 的ComposedChart组件封装为 Python 类定义于 packages/reflex-components-recharts/src/reflex_components_recharts/charts.pyclass ComposedChart(CategoricalChartBase): A Composed chart component in Recharts. tag ComposedChart alias RechartsComposedChart ... _valid_children: ClassVar[list[str]] [ XAxis, YAxis, ReferenceArea, ReferenceDot, ReferenceLine, Brush, CartesianGrid, Legend, GraphingTooltip, Area, Line, Bar, Defs, Layer, Rectangle, ]模块末尾通过composed_chart ComposedChart.create同文件 charts.py暴露给用户调用。从_valid_children可以看出组合图允许的合法子组件不仅包含Area、Line、Bar三类系列还包括XAxis、YAxis、CartesianGrid、Legend、GraphingTooltip、Brush以及ReferenceLine/ReferenceArea/ReferenceDot等参考元素这为后续扩展打下了基础。组合图与单一图表的关系单个图表如面积图、折线图、柱状图各自只能承载一种视觉编码而组合图把它们统一收纳在一个坐标系中。想要深入了解单类图表的用法可参考同目录下的 area_chart、line_chart 和 bar_chart 文档。When to Use a Composed Chart何时该用组合图当单一图表类型无法完整讲述数据故事时组合图就是合适的选择。官方文档列举了几种常见组合模式在bar的总量柱子上叠加一条趋势line同时呈现总量与趋势用area绘制数值区间范围再用line绘制实际值对比累计度量与逐期度量如累计销售额 vs 每日销售额。因为每个系列——rx.recharts.bar()、rx.recharts.line()、rx.recharts.area()——都是rx.recharts.composed_chart()的子组件所以它们天然共享同一份data、同一个 x 轴、同一个 tooltip 和同一个 legend。系列按你列出的顺序绘制后面的子组件会覆盖在先前的之上。基础示例柱状图 面积图 折线图下面是一个完整的组合图示例在同一个坐标系中叠加了面积图uv、柱状图amt和折线图pvimport 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 composed(): return rx.recharts.composed_chart( rx.recharts.area(data_keyuv, stroke#8884d8, fill#8884d8), rx.recharts.bar(data_keyamt, bar_size20, fill#413ea0), rx.recharts.line(data_keypv, type_monotone, stroke#ff7300), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(), rx.recharts.cartesian_grid(stroke_dasharray3 3), rx.recharts.graphing_tooltip(), datadata, height250, width100%, )关键 props 逐一解读data图表数据源每个元素是一个对象字典。它定义于CategoricalChartBase.datacharts.py类型为Sequence[dict[str, Any]]。rx.recharts.area(data_keyuv, stroke..., fill...)面积图系列。data_key指向数据对象中的字段名stroke与fill分别控制描边与填充颜色默认值见 cartesian.py 中Area类stroke默认rx.color(accent, 9)、fill默认rx.color(accent, 5)。Area还支持type_插值方式默认monotone与stack_id相同stack_id的面积会按顺序堆叠。rx.recharts.bar(data_keyamt, bar_size20, fill#413ea0)柱状图系列。bar_size指定柱宽/柱高——ComposedChart.bar_size的文档说明charts.py如果未指定bar_size柱体尺寸将由bar_category_gap、bar_gap和柱组数量自动计算。rx.recharts.line(data_keypv, type_monotone, stroke#ff7300)折线图系列。type_控制插值曲线类型monotone为平滑单调曲线。rx.recharts.x_axis(data_keyname)/rx.recharts.y_axis()x/y 轴。x 轴通过data_key绑定分类字段y 轴默认数值轴。rx.recharts.cartesian_grid(stroke_dasharray3 3)网格线stroke_dasharray定义虚线的实虚模式。rx.recharts.graphing_tooltip()悬浮提示框。height250, width100%图表尺寸。尺寸参数的底层行为注意height与width并不是直接传给 Recharts 图表本身。在ChartBase.createcharts.py中图表总是被包进一个ResponsiveContainer且通过_ensure_valid_dimension校验尺寸必须是 int 像素值或带%的字符串CSS 单位尺寸不允许直接用在图表上应设置在父容器上。同时实现强制设置了min_height10、min_width10的兜底值避免图表在容器尺寸异常时塌陷消失——如果只看到一个小图表通常说明需要调整父容器的尺寸。ResponsiveContainer定义于 general.py支持aspect宽高比、min_width/min_height、debounceresize 防抖默认 0与on_resize回调。Composed Chart with a Dual Axis双轴组合图当两个系列的数值尺度差异悬殊时例如一个是订单数、一个是金额共用单个 y 轴会让较小尺度的系列几乎不可读。此时可以添加第二个 y 轴并用y_axis_id让每个系列绑定到各自的轴上。官方文档示例中orders柱状图绑定左侧轴y_axis_idleftrevenue折线图绑定右侧轴y_axis_idrightimport reflex as rx data [ {name: Mon, orders: 40, revenue: 2400}, {name: Tue, orders: 30, revenue: 1398}, {name: Wed, orders: 55, revenue: 9800}, {name: Thu, orders: 27, revenue: 3908}, {name: Fri, orders: 62, revenue: 4800}, {name: Sat, orders: 48, revenue: 3800}, {name: Sun, orders: 35, revenue: 4300}, ] def composed_dual_axis(): return rx.recharts.composed_chart( rx.recharts.bar( data_keyorders, bar_size20, fillrx.color(accent, 8), y_axis_idleft, ), rx.recharts.line( data_keyrevenue, type_monotone, strokerx.color(green, 9), y_axis_idright, ), rx.recharts.x_axis(data_keyname), rx.recharts.y_axis(y_axis_idleft), rx.recharts.y_axis(y_axis_idright, orientationright), rx.recharts.cartesian_grid(stroke_dasharray3 3), rx.recharts.graphing_tooltip(), rx.recharts.legend(), datadata, height300, width100%, )双轴的实现机制双轴的关键在于y_axis_id的配对逻辑这一机制定义于Cartesian基类cartesian.pyy_axis_id系列绑定的 y 轴 id默认0x_axis_id系列绑定的 x 轴 id默认0。在YAxis类中cartesian.pyy_axis_id与orientation属性共同决定轴的渲染位置orientation取值为left | right默认left。因此要构造双轴只需定义两个rx.recharts.y_axis()分别设置y_axis_idleft与y_axis_idright右侧轴显式指定orientationright让刻度标签渲染在图表右侧在每个系列bar/line/area上通过y_axis_id指向对应轴。这样两个尺度差异巨大的系列各得其所各自拥有独立的量纲刻度。示例中还用rx.color(accent, 8)与rx.color(green, 9)引用 Reflex 主题色板rx.color基于 reflex/constants/colors.py 中定义的调色板按比例取色能让图表配色自动跟随应用主题。双轴示例中的其他组件rx.recharts.legend()图例组件。Legend类general.py支持layouthorizontal | vertical默认horizontal、alignleft | center | right默认center、vertical_aligntop | middle | bottom默认bottom与icon_type/icon_size等配置。图例项的显示名称默认取data_key也可以通过系列的nameprop 覆盖见 cartesian.py。深入理解组合图的共享与叠加机制1. 共享 data、坐标轴、tooltip 与 legend组合图的所有子系列共享同一份data与坐标系统这正是组合的意义所在。在源码中data、margin、sync_id等属性都定义在CategoricalChartBasecharts.py组合图与 AreaChart、BarChart、LineChart 一样继承自它因此四者的数据模型与坐标轴绑定方式完全一致。2. 系列绘制顺序即图层顺序系列按在composed_chart()中的书写顺序叠加先写的渲染在底层后写的覆盖在上层。在设计时通常把面积图/柱状图写在前作为背景层折线图写在后作为前景强调层。3. 组合图专属的布局与堆叠 propsComposedChart类charts.py在继承CategoricalChartBase的基础上额外暴露了以下常用配置prop说明默认值base_value面积图的基础值取Number或dataMin/dataMax/auto类型定义见 recharts.pyautobar_category_gap两个柱组类别之间的间隙可为百分比或固定值10%bar_gap同一类别内两根柱之间的间隙4bar_size每根柱的宽度/高度未指定时按bar_category_gap、bar_gap与柱组数量自动计算自动reverse_stack_order堆叠项渲染方向影响 SVG 分层不影响 x 位置False这些 props 同时支持在composed_chart顶层设置作用于所有柱系列也可以在单个rx.recharts.bar()上单独指定。4. 图表级事件与工具提示所有图表继承自ChartBasecharts.py支持on_click、on_mouse_enter、on_mouse_move、on_mouse_leave等事件处理器每个系列组件Area/Bar/Line也继承自Cartesian额外提供on_animation_start、on_animation_end以及完整的鼠标事件集可用于实现交互式仪表盘。在 Reflex 应用中接入组合图组合图是reflex-components-recharts包的一部分随 Reflex 框架import reflex as rx一并可用无需单独安装。把它接入页面只需三步准备数据以list[dict]形式组织数据每个字典的键与各系列的data_key对应定义组件函数返回rx.recharts.composed_chart(...)按需组合area/bar/line系列与x_axis/y_axis/cartesian_grid/graphing_tooltip/legend等辅助组件挂载到页面在页面组件中调用该函数如rx.container(composed())。如果数据来自 Reflex 的 State可将data绑定为一个Var例如dataState.chart_data图表会在状态更新时自动重渲染。总结组合图是 Reflex 图表体系中表达能力最强的一类图表它把柱状图的总量表达、折线图的趋势表达与面积图的区间表达统一到同一坐标系中并天然共享 data、坐标轴、tooltip 与图例通过y_axis_id可以轻松构造双轴让量纲悬殊的系列共存于一张图。结合 charts.py 中ComposedChart的源码实现你可以精确控制柱间隙、堆叠顺序、基础值与响应式尺寸在纯 Python 中构建出专业级的数据可视化。相关图表想继续探索 Reflex 与 Recharts 支持的其他图表类型可以阅读Bar Chart柱状图Line Chart折线图Area Chart面积图【免费下载链接】reflex️ Web apps in pure Python 项目地址: https://gitcode.com/GitHub_Trending/re/reflex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考