数据可视化数据分析【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址https://gitcode.com/gh_mirrors/pl/plotly.py点击查看免费下载面积图Filled Area Plot是数据可视化中表达“量随某个轴累积或变化”的最直观方式之一它通过把折线与坐标轴或另一条折线之间的区域填充为颜色让读者一眼就能看出趋势、占比与分层结构。本篇技术指南以 Plotly.py 官方文档 doc/python/filled-area-plots.md 为核心骨架结合仓库内plotly.express与plotly.graph_objects的真实源码实现系统讲解三类核心能力用高层接口px.area快速生成堆叠面积图、用底层go.Scatter的fill/stackgroup/groupnorm精确控制填充行为以及较新版本提供的fillgradient渐变填充与 pattern 纹理填充。读完本文你将能根据数据形态与展示目标直接选用正确的 API 组合写出可复制、可运行的面积图代码。一、先理解面积图的底层机制go.Scatter.fill无论是高层接口还是底层接口Plotly 中所有面积图最终都由scatter类 trace 的fill属性驱动。在 plotly/graph_objs/_scatter.py 的自动生成源码中fill被定义为一个枚举属性其取值与语义如下取值填充语义none不填充默认值若 trace 处于堆叠组中则自动变为tonexty/tonextxtozeroy向下填充到 y0沿 x 轴方向tozerox向左填充到 x0沿 y 轴方向tonexty填充到前一条 trace 的端点并连线形成堆叠面积图若无前序 trace 则退化为tozeroytonextx填充到前一条 trace 的端点水平方向无前序 trace 时退化为tozeroxtoself把 trace 自身端点或分段闭合为封闭形状tonext填充两条相互完全包围的 trace 之间的空间如等高线场景无前序 trace 时表现为toself源码文档字符串还明确了一条关键行为同属一个stackgroup的 trace 只会填充到组内其他 trace当存在多个堆叠组、或部分 trace 堆叠部分不堆叠时若填充关联的 trace 不是连续的后者会被压到绘制顺序的后面the later ones will be pushed down in the drawing order。理解这一点是后续所有堆叠场景正确性的前提。二、用plotly.express快速绘制堆叠面积图2.1 基础用法px.areaPlotly Express 是 Plotly 的高层接口px.area即其面积图入口。官方文档给出的第一个示例使用内置的gapminder数据集按大洲着色、按国家分组绘制人口随年份的堆叠面积图import plotly.express as px df px.data.gapminder() fig px.area(df, xyear, ypop, colorcontinent, line_groupcountry) fig.show()这里的语义是每一块被填充的面积区域对应line_group指定列的一个取值color决定每条折线的颜色而所有 trace 会通过stackgroup自动堆叠起来。px.data.gapminder()返回的数据集定义于 plotly/data/init.pygapminder函数其每一行代表某个国家在某一年的记录包含country、continent、year、pop等列该函数还支持year过滤、datetimes时间类型转换、centroids经纬度附加与return_type返回类型切换等参数便于按需裁剪数据。2.2 源码视角px.area到底做了什么px.area的实现位于 plotly/express/_chart_types.py。其函数签名完整覆盖了高层绘图所需的全部参数data_frame、x、y、line_group、color、pattern_shape、symbol、hover_name、hover_data、custom_data、text、facet_row/facet_col、animation_frame/group、category_orders、labels、color_discrete_sequence/map、pattern_shape_sequence/map、symbol_sequence/map、markers、orientation、groupnorm、log_x/log_y、range_x/range_y、line_shape、title、subtitle、template、width、height。关键在最后两行——它把参数直接委托给统一的make_figure流水线并注入一段trace_patchreturn make_figure( argslocals(), constructorgo.Scatter, trace_patchdict(stackgroup1, modelines, groupnormgroupnorm), )这说明三个事实px.area生成的底层 trace 类型就是go.Scatter它默认设置stackgroup1一个名为1的堆叠组所有面积块自动堆叠modelines意味着默认只画折线、不画标记点可通过markersTrue开启顶层参数groupnorm会被直接透传到每个 trace用于归一化堆叠详见下文。也就是说px.area(df, x..., y..., color...)在底层等价于若干条设置了stackgroup、modelines的go.Scattertrace官方文档 plotly/express/_chart_types.py 中对area的 docstring 也明确写道In a stacked area plot, each row ofdata_frameis represented as a vertex of a polyline mark in 2D space. The area between successive polylines is filled.2.3 Pattern 纹理填充v5.7 新增面积图除了用颜色区分还支持图案/纹理hatching / texture来增强可辨识度这在打印输出或色盲友好场景下尤其有用。官方文档示例使用medals_long数据集import plotly.express as px df px.data.medals_long() fig px.area(df, xmedal, ycount, colornation, pattern_shapenation, pattern_shape_sequence[., x, ]) fig.show()这里pattern_shape指定用nation列区分图案pattern_shape_sequence自定义图案序列.点、x交叉、加号。在 plotly/express/_core.py 中可以看到当未显式给出pattern_shape_sequence时Plotly Express 会优先尝试从当前template的 bar trace 继承否则使用默认序列[, /, \\, x, , .]pattern_shape参数在推断配置时会被映射到底层marker.pattern.shape属性见同文件第 44 行注释。medals_long数据集同样定义于 plotly/data/init.py为长表tidy格式每行是一个国家 × 奖牌类型的组合计数天然适合px.area按color/pattern_shape分组。三、用plotly.graph_objects精确控制填充当需要精细控制每条 trace 的填充方向、颜色、堆叠与归一化时直接使用go.Scatter是更灵活的选择。以下小节逐一对应官方文档中的经典场景。3.1 基础叠加面积图tozeroytonextyimport plotly.graph_objects as go fig go.Figure() fig.add_trace(go.Scatter(x[1, 2, 3, 4], y[0, 2, 3, 5], filltozeroy)) # fill down to xaxis fig.add_trace(go.Scatter(x[1, 2, 3, 4], y[3, 5, 1, 7], filltonexty)) # fill to trace0 y fig.show()第一条 tracefilltozeroy从折线向下填充到 y0即 x 轴形成山峰状区块第二条 tracefilltonexty填充到第一条 trace 的 y 值端点两者之间形成叠加带。两条 trace 默认mode为markerslines因此会同时显示数据点与折线轮廓。源码文档字符串见上文fill属性对tonexty的解释是连接到前一条 trace的端点若无前序 trace 则退化为tozeroy——所以本例中第二条 trace 的实际填充区间是trace1 折线下方、trace0 折线上方。3.2 去掉边界线的叠加面积图modenone如果不希望显示折线与数据点、只要纯色块可将mode设为none它会覆盖默认的markerslinesimport plotly.graph_objects as go fig go.Figure() fig.add_trace(go.Scatter(x[1, 2, 3, 4], y[0, 2, 3, 5], filltozeroy, modenone # override default markerslines )) fig.add_trace(go.Scatter(x[1, 2, 3, 4], y[3, 5, 1, 7], filltonexty, mode none)) fig.show()这种无轮廓样式常用于呈现平滑的分层总量视觉上更干净。结合px.area的trace_patchdict(modelines)plotly/express/_chart_types.py可以看到高层接口默认保留lines而关闭markers与这里的modenone形成对照——两种形态都可以通过mode自由切换。3.3 内部填充只填充两条 trace 之间的区域tonexty并不要求第一条 trace 必须填充。下面的例子中trace0 的fillNone、只画indigo折线trace1 的filltonexty填充到 trace0 之间从而只突出两条曲线夹出的带状区域import plotly.graph_objects as go fig go.Figure() fig.add_trace(go.Scatter(x[1, 2, 3, 4], y[3, 4, 8, 3], fillNone, modelines, line_colorindigo, )) fig.add_trace(go.Scatter( x[1, 2, 3, 4], y[1, 6, 2, 6], filltonexty, # fill area between trace0 and trace1 modelines, line_colorindigo)) fig.show()填充的默认颜色是当前线条颜色的半透明变体fillcolor属性文档Defaults to a half-transparent variant of the line color因此这里两条 indigo 折线之间会呈现一层半透明 indigo 色带既保留数据曲线又突出区间差异。官方文档将此场景称为 Interior Filling for Area Chart即内部填充。3.4 渐变填充fillgradient5.20 新增带fill的 scatter trace 支持fillgradient——一个定义渐变参数的dict。官方文档给出的水平渐变示例import plotly.graph_objects as go fig go.Figure( [ go.Scatter( x[1, 2, 3, 4], y[3, 4, 8, 3], fillNone, modelines, line_colordarkblue, ), go.Scatter( x[1, 2, 3, 4], y[1, 6, 2, 6], filltonexty, modelines, line_colordarkblue, fillgradientdict( typehorizontal, colorscale[(0.0, darkblue), (0.5, royalblue), (1.0, cyan)], ), ), ] ) fig.show()fillgradient的完整属性集合定义于自动生成的 plotly/graph_objs/scatter/_fillgradient.py其_valid_props {colorscale, start, stop, type}各属性语义如下type渐变的类型/方向枚举值为[radial, horizontal, vertical, none]默认none即退化为纯色fillcolor。文档描述它同时决定colorscale的施加方向。colorscale渐变使用的颜色刻度支持三种写法见 plotly/graph_objs/scatter/_fillgradient.py一组颜色列表会被均匀插值成 colorscale如[darkblue, cyan]归一化位置0~1与颜色的二元组列表例如[(0.0, green), (0.5, red), (1.0, rgb(0, 0, 255))]命名 colorscale 名称plotly.colors中sequential、diverging、cyclical模块预置的几十种如viridis、magma、blues等追加_r后缀可反转方向。start/stop渐变沿方向轴的起始/结束绝对坐标。例如typehorizontal时从 x 坐标start处开始渐变省略时分别取 trace 沿该轴的最低值与最高值。径向渐变radial会忽略这两个参数——渐变从中心到距中心最远点展开。需要说明的是fillgradient仅在填充有效即fill非none时才有意义当fillgradient被指定时fillcolor会被忽略见 plotly/graph_objs/_scatter.py 中fillcolor与fillgradient属性的文档说明。渐变填充功能自 5.20 版本起可用请确保使用不低于该版本的 Plotly。3.5 堆叠面积图stackgroupstackgroup参数把同一组内各 trace 的 y 值水平方向则为 x 值相加组内 trace 依次填到组内下一条 trace 之上形成堆叠。官方文档示例import plotly.graph_objects as go x[Winter, Spring, Summer, Fall] fig go.Figure() fig.add_trace(go.Scatter( xx, y[40, 60, 40, 10], hoverinfoxy, modelines, linedict(width0.5, colorrgb(131, 90, 241)), stackgroupone # define stack group )) fig.add_trace(go.Scatter( xx, y[20, 10, 10, 60], hoverinfoxy, modelines, linedict(width0.5, colorrgb(111, 231, 219)), stackgroupone )) fig.add_trace(go.Scatter( xx, y[40, 30, 50, 30], hoverinfoxy, modelines, linedict(width0.5, colorrgb(184, 247, 212)), stackgroupone )) fig.update_layout(yaxis_range(0, 100)) fig.show()源码文档plotly/graph_objs/_scatter.py对这一机制有权威描述stackgroup是一个字符串同一stackgroup的 trace 的 y 值或orientationh时的 x 值会被相加开启堆叠会自动打开填充默认使用tonexty水平方向为tonextx同一组内的 trace 只会填充到组内其他 trace多个堆叠组并存或部分堆叠时填充关联 trace 若不连续会被调整绘制顺序。示例代码还展示了两个实用细节用linedict(width0.5, color...)控制组内折线宽度与颜色用fig.update_layout(yaxis_range(0, 100))把 y 轴范围固定避免堆叠总量超出可视区域。3.6 归一化堆叠groupnormpercentgroupnorm只对使用stackgroup的 trace 生效且只取组内第一个出现的groupnorm值含visible为False的 trace。官方文档示例将各组值归一化为百分比得到占比面积图import plotly.graph_objects as go x[Winter, Spring, Summer, Fall] fig go.Figure() fig.add_trace(go.Scatter( xx, y[40, 20, 30, 40], modelines, linedict(width0.5, colorrgb(184, 247, 212)), stackgroupone, groupnormpercent # sets the normalization for the sum of the stackgroup )) fig.add_trace(go.Scatter( xx, y[50, 70, 40, 60], modelines, linedict(width0.5, colorrgb(111, 231, 219)), stackgroupone )) fig.add_trace(go.Scatter( xx, y[70, 80, 60, 70], modelines, linedict(width0.5, colorrgb(127, 166, 238)), stackgroupone )) fig.add_trace(go.Scatter( xx, y[100, 100, 100, 100], modelines, linedict(width0.5, colorrgb(131, 90, 241)), stackgroupone )) fig.update_layout( showlegendTrue, xaxis_typecategory, yaxisdict( typelinear, range[1, 100], ticksuffix%)) fig.show()关键点只有第一条 trace 需要显式写groupnormpercent组内其他 trace 可省略因为源码规定只取组内第一个groupnorm每个 x 位置处各 trace 的 y 值除以该位置组内总和得到百分比。groupnorm还有fraction取值归一化为 0~1 的小数percent则对应 0~100布局层通过xaxis_typecategory把 x 当成分类轴Winter等文本标签yaxis设置range[1, 100]与ticksuffix%让纵轴以百分比形式展示。3.7 选择 Hover 作用区域hoveronpointsfills默认情况下 hover 只作用于数据点。通过hoveron可以扩展或限制hover 的命中区域官方文档示例对比了pointsfills与points两种模式import plotly.graph_objects as go fig go.Figure() fig.add_trace(go.Scatter(x[0,0.5,1,1.5,2], y[0,1,2,1,0], filltoself, fillcolordarkviolet, hoveron pointsfills, # select where hover is active line_colordarkviolet, textPoints Fills, hoverinfo textxy)) fig.add_trace(go.Scatter(x[3,3.5,4,4.5,5], y[0,1,2,1,0], filltoself, fillcolor violet, hoveronpoints, line_colorviolet, textPoints only, hoverinfotextxy)) fig.update_layout( title hover on ipoints/i or ifill/i, xaxis_range [0,5.2], yaxis_range [0,3] ) fig.show()本例还展示了两个相关能力filltoself把折线端点闭合为封闭多边形两个山峰状区域配合fillcolor指定填充色hoveron的可选枚举[plotly/graph_objs/_scatter.py](https://link.gitcode.com/i/a1934fb2ab2da35c794ce6176bbbc0d5)附近源码包括points、fills、pointsfills等当 fill 为toself或tonext且折线未完全封闭时points会退化为fills行为——即悬停在点内与填充区域内均触发 hoverhoverinfotextxy让 tooltip 同时显示自定义text、x 与 y 值。四、参数速查与选择指南综合官方文档与源码将两条 API 路径的关键参数整理如下便于快速决策4.1px.area高层接口自动堆叠参数作用说明data_frame数据源长表/宽表均可参考 plotly.express 参数文档x/y坐标列必填line_group分块列每个取值生成一块被填充的面积color颜色分组决定各面积块颜色pattern_shape纹理分组v5.7配合pattern_shape_sequence自定义纹理groupnorm归一化透传到底层 trace取值fraction/percentmarkers是否画数据点默认False底层modelinesorientation堆叠方向v默认或hline_shape连线形状如linear、spline、hv等title/subtitle标题直接写入layout.title4.2go.Scatter底层接口精确控制属性作用关键取值/说明fill填充方式none/tozeroy/tozerox/tonexty/tonextx/toself/tonextfillcolor填充颜色默认取线条颜色的半透明变体fillgradient渐变填充5.20dict(type..., colorscale..., start..., stop...)stackgroup堆叠组同名分组内 y 值相加自动开启filltonextygroupnorm组内归一化fraction/percent只取组内首个值hoveronhover 区域points/fills/pointsfillsmode渲染模式lines/markers/linesmarkers/none如何选择需要快速出图、数据是整洁的 DataFrame 时优先px.area它自动完成stackgroup1与modelines的配置见 plotly/express/_chart_types.py需要对每条 trace 单独控制填充方向、颜色、hover 与渐变时使用go.Scatter两者可以在同一go.Figure中混用。五、测试佐证px.area在仓库中的验证覆盖仓库测试对px.area有系统覆盖可作为 API 行为正确性的佐证tests/test_optional/test_px/test_pandas_backend.py验证 pandas 的df.plot.area()/df.plot(kindarea)与px.area的等价映射说明px.area也参与 pandas 后端兼容tests/test_optional/test_px/test_px_input.py在输入校验测试中px.area与px.scatter、px.line等一同被参数化覆盖tests/test_optional/test_px/test_px_wide.py验证px.area对宽表wide-form数据的正确处理。这些测试文件位于tests/test_optional/test_px/目录是深入理解px.area边界行为如宽表输入、pandas 后端的第一手资料。六、实践建议与常见坑堆叠与填充的自动联动只要设置了stackgroupfill就会被自动设为tonexty水平为tonextx。若想堆叠但不填充需要显式覆盖fillnone。groupnorm只认第一个归一化值只取组内第一条 trace 的设置因此务必把groupnorm写在该组第一条 trace 上否则可能得到意外结果。渐变填充的版本前提fillgradient需要 Plotly 5.20低版本下该属性不可用建议升级并留意fillcolor与fillgradient的互斥关系。tonexty与tozeroy的退化规则没有前序 trace 时tonexty/tonextx会退化为tozeroy/tozerox因此第一条 trace通常是tozeroy或fillNone。坐标系与填充方向tozeroy填充到 y0、tozerox填充到 x0绘制水平堆叠面积图orientationh时使用 x 方向的填充与堆叠。颜色辨识多分类堆叠时除了color还可叠加pattern_shape纹理以兼顾打印与色盲场景纹理序列支持.、x、、/、\\、空等。参考与延伸阅读本文核心依据doc/python/filled-area-plots.md高层接口实现plotly/express/_chart_types.py底层属性定义plotly/graph_objs/_scatter.pyfill、plotly/graph_objs/scatter/_fillgradient.pyfillgradient内置数据集plotly/data/init.pygapminder、plotly/data/init.pymedals_long纹理与序列默认值逻辑plotly/express/_core.py相关测试tests/test_optional/test_px/test_pandas_backend.py、tests/test_optional/test_px/test_px_wide.py相邻主题纹理/图案填充详解见 doc/python/pattern-hatching-texture.mdPlotly Express 的通用参数与数据结构见 doc/python/px-arguments.md样式定制见 doc/python/styling-plotly-express.md赞分享数据可视化数据分析【免费下载链接】plotly.pyThe interactive graphing library for Python :sparkles:项目地址https://gitcode.com/gh_mirrors/pl/plotly.py点击查看免费下载相关推荐WSABuilds 指南在 Windows 上运行带 Google Play 商店与 root 的 Android 子系统WSABuilds 指南在 Windows 上运行带 Google Play 商店与 root 的 Android 子系统 WSABuilds 是一个基于预构开发工具PixiJS v8 Graphics 填充完全指南用 fill() 驾驭颜色、纹理与渐变PixiJS v8 Graphics 填充完全指南用 fill 驾驭颜色、纹理与渐变 导读本指南以 PixiJS 场景模块 scene 中 Graphi前端图形学Lucide 填充图标Filled Icons实战指南利用 fill 属性打造实心图标Lucide 填充图标Filled Icons实战指南利用 fill 属性打造实心图标 Lucide 是一个由社区维护的开源图标工具包也是 Feathe前端UI组件设计系统上一篇告别混乱实验用DVCGit管理EfficientNet-PyTorch模型训练全流程下一篇终极指南如何快速从PDF中提取表格数据Tabula表格提取神器详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考