1. 从单图到多图为什么你需要掌握子图绘制在数据可视化的日常工作中我们常常会遇到一个尴尬的局面手头有多个维度的数据需要同时展示比如同一指标在不同时间段的对比、不同变量之间的相关性矩阵、或者一个复杂流程的多个阶段状态。如果把这些图表一个个单独画出来不仅报告会变得冗长更重要的是读者很难在脑海中将这些分散的信息关联起来形成整体认知。这时候子图Subplots就成了一个不可或缺的利器。Plotly作为一款功能强大且交互性极强的可视化库其子图功能远不止是“把几张图拼在一起”那么简单。它提供了从简单的网格排列到复杂的、共享坐标轴的不规则布局再到将不同类型图表如散点图、热力图、箱线图无缝组合的能力。掌握Plotly的子图绘制意味着你能将数据分析的叙事能力提升一个维度用一张综合视图讲清楚一个复杂的故事。最近在社区里关于Plotly子图以及相关图表如热力图的讨论热度不减。大家不仅关心如何创建子图更深入到如何精细化控制每个子图的细节比如“修改x轴密度”来适应不同时间序列的颗粒度或者调整“热力图参数”以更准确地映射数据强度。这些需求都指向一个核心子图不是终点而是一个起点它要求我们对每个子图的个体属性和子图之间的整体协调有更深入的理解。接下来我将结合多年的使用经验带你从零开始深入Plotly子图的世界。我们会从最基础的make_subplots讲起逐步深入到坐标轴共享、混合图表类型、以及如何利用热词中提到的“热力图强度轴”等高级技巧来打造专业级的多图仪表板。2. 基石make_subplots的完全指南Plotly绘制子图的核心函数是plotly.subplots.make_subplots。这个函数就像是一个画布的网格规划师你告诉它要几行几列它帮你把画布分割好并返回一个Figure对象。之后你只需要向这个Figure对象的特定位置row和col添加轨迹trace即可。2.1 基础网格创建与轨迹添加让我们从一个最简单的2x2网格开始。这里的关键是理解rows和cols参数定义了网格结构而specs参数则可以定义每个子单元格的详细规格。import plotly.graph_objects as go from plotly.subplots import make_subplots import numpy as np # 创建一些示例数据 x np.linspace(0, 10, 100) y1 np.sin(x) y2 np.cos(x) y3 np.sin(x) * np.cos(x) y4 np.tan(x) / (np.tan(x) 1) # 避免无穷大 # 1. 创建基础的2行2列子图网格 fig make_subplots( rows2, cols2, subplot_titles(正弦函数 Sin(x), 余弦函数 Cos(x), 乘积 Sin(x)*Cos(x), 变换函数 Tan(x)/(Tan(x)1)) # 为每个子图添加标题 ) # 2. 向指定位置添加轨迹Trace # 添加散点图到 (1,1) 位置即第一行第一列 fig.add_trace( go.Scatter(xx, yy1, modelines, nameSin), row1, col1 ) # 添加散点图到 (1,2) 位置即第一行第二列 fig.add_trace( go.Scatter(xx, yy2, modelines, nameCos), row1, col2 ) # 添加散点图到 (2,1) 位置 fig.add_trace( go.Scatter(xx, yy3, modelines, nameSin*Cos), row2, col1 ) # 添加散点图到 (2,2) 位置 fig.add_trace( go.Scatter(xx, yy4, modelines, nameTan/(Tan1)), row2, col2 ) # 3. 更新整体布局可选但推荐 fig.update_layout( height600, # 设置整个画布的高度 width800, # 设置整个画布的宽度 title_text基础2x2子图示例, # 整个图的标题 showlegendFalse # 在这个例子中每个子图图例独立显示可能更清晰这里先全局关闭 ) # 显示图形 fig.show()这段代码构建了一个标准的四宫格。add_trace方法中的row和col参数是指定位置的唯一方式务必从1开始计数。subplot_titles参数接受一个列表用于为每个子图设置标题顺序是按行优先row-major排列的。注意make_subplots创建的是一个空的画布网格。fig.add_trace()才是真正将数据轨迹填充到具体单元格的操作。一个常见的错误是创建了子图网格却忘记了使用row和col参数指定添加位置导致所有轨迹都堆叠在第一个子图上。2.2 高级网格控制specs与shared_axes基础网格能满足大部分需求但当我们想创建更复杂的布局时比如第一行放一个占满整行的大图下面再放两行小图或者让某些子图共享X轴或Y轴以方便对比就需要用到specs和shared_axes参数。specs参数它是一个二维列表列表的列表其维度与rows和cols定义的网格一致。specs中的每个元素是一个字典用于定义对应子图单元格的属性。最强大的一个属性是colspan和rowspan它允许一个子图占据多个单元格。# 创建不规则网格第一行一个宽图第二行两个标准图 fig make_subplots( rows2, cols2, specs[ [{colspan: 2}, None], # 第一行第一个单元格横跨2列第二个单元格为None留空 [{}, {}] # 第二行两个标准单元格 ], subplot_titles(占据整行的主图, , 左下角子图, 右下角子图) ) # 生成一些数据 main_x np.linspace(0, 5, 50) main_y main_x ** 2 sub1_x np.linspace(0, 2*np.pi, 50) sub1_y np.sin(sub1_x) sub2_x np.linspace(0, 2*np.pi, 50) sub2_y np.cos(sub2_x) # 添加轨迹 fig.add_trace(go.Scatter(xmain_x, ymain_y, modelinesmarkers, nameyx^2), row1, col1) fig.add_trace(go.Scatter(xsub1_x, ysub1_y, modelines, namesin(x)), row2, col1) fig.add_trace(go.Scatter(xsub2_x, ysub2_y, modelines, namecos(x)), row2, col2) fig.update_layout(height500, width700, title_text使用colspan的不规则网格示例, showlegendTrue) fig.show()在这个例子中specs[[{“colspan”: 2}, None], [{}, {}]]是关键。它表示第一行(row1)第一个单元格(col1)的规格是{“colspan”: 2}即横跨2列第二个单元格(col2)为None表示此位置不创建子图。第二行(row2)两个单元格都是空字典{}表示使用默认规格。shared_axes参数这个参数用于控制哪些子图共享坐标轴。共享轴意味着当你用鼠标缩放或平移其中一个子图时与之共享轴的子图会同步变化这对于对比分析极其有用。它可以取值为False不共享、True所有子图共享、‘rows’同行共享、‘columns’同列共享或‘all’同True。# 创建共享X轴的子图常用于时间序列对比 fig make_subplots( rows3, cols1, shared_xaxesTrue, # 共享X轴 vertical_spacing0.05, # 减少垂直间距因为共享X轴后不需要重复显示刻度标签 subplot_titles(股票A价格, 股票B价格, 成交量对比) ) # 模拟股票数据 time pd.date_range(2023-01-01, periods100, freqD) price_a 100 np.cumsum(np.random.randn(100) * 2) price_b 200 np.cumsum(np.random.randn(100) * 1.5) volume np.random.randint(1000, 10000, size100) fig.add_trace(go.Scatter(xtime, yprice_a, modelines, nameStock A), row1, col1) fig.add_trace(go.Scatter(xtime, yprice_b, modelines, nameStock B), row2, col1) # 第三个子图我们用柱状图 fig.add_trace(go.Bar(xtime, yvolume, nameVolume, marker_colorlightgray), row3, col1) fig.update_layout(height700, title_text共享X轴的时间序列子图示例) fig.update_xaxes(title_text日期, row3, col1) # 只在最下面的子图显示X轴标题 fig.update_yaxes(title_text价格, row1, col1) fig.update_yaxes(title_text价格, row2, col1) fig.update_yaxes(title_text成交量, row3, col1) fig.show()设置shared_xaxesTrue后你会发现三个子图的X轴时间轴被链接在了一起。滚动或缩放任意一个子图的时间范围其他两个子图会立即同步。vertical_spacing可以调整子图间的垂直距离当共享轴时可以适当调小以使布局更紧凑。3. 混合图表类型与坐标轴精细化控制一个专业的仪表板往往包含多种图表类型。Plotly的make_subplots完美支持这一点。你可以轻松地将散点图Scatter、柱状图Bar、箱线图Box、热力图Heatmap等组合在同一个画布中。关键在于理解specs参数中的type属性以及如何对每个子图的坐标轴进行独立且精细的控制。3.1 组合散点图、柱状图与热力图假设我们要分析一个电商数据集展示每日销售额折线图、各类别销售额占比柱状图和用户活跃时段热力图。我们可以这样设计import plotly.graph_objects as go from plotly.subplots import make_subplots import pandas as pd import numpy as np # 模拟数据 dates pd.date_range(2023-06-01, periods30, freqD) daily_sales 5000 np.random.randn(30).cumsum() * 200 # 每日销售额 categories [电子产品, 服装, 家居, 图书] category_sales np.random.randint(1000, 5000, sizelen(categories)) # 类别销售额 # 模拟24小时用户活跃度热力图数据 hours list(range(24)) days list(range(1, 31)) # 生成一个30天*24小时的活跃度矩阵白天活跃度高 activity_data np.zeros((30, 24)) for i in range(30): for j in range(24): # 模拟白天8-20点活跃度更高 base 50 if 8 j 20 else 10 activity_data[i, j] base np.random.randn() * 5 activity_data np.abs(activity_data) # 取绝对值确保非负 # 创建子图1行3列分别指定图表类型 fig make_subplots( rows1, cols3, specs[ [{type: scatter}, {type: bar}, {type: heatmap}] # 分别指定类型 ], column_widths[0.35, 0.3, 0.35], # 控制每列的相对宽度 subplot_titles(近30日销售额趋势, 商品类别销售额, 用户活跃时段热力图 (Day vs Hour)) ) # 1. 添加销售额折线图 fig.add_trace( go.Scatter(xdates, ydaily_sales, modelinesmarkers, linedict(colorroyalblue, width2), markerdict(size6), name日销售额), row1, col1 ) # 2. 添加类别销售额柱状图 fig.add_trace( go.Bar(xcategories, ycategory_sales, marker_color[firebrick, seagreen, darkorange, steelblue], name类别销售额), row1, col2 ) # 3. 添加活跃度热力图 # 注意热力图的x和y参数通常对应数据矩阵的列和行索引。 fig.add_trace( go.Heatmap( zactivity_data, xhours, # X轴是小时 (0-23) ydays, # Y轴是天数 (1-30) colorscaleViridis, # 颜色映射方案 colorbardict(title活跃度), # 颜色条标题 name活跃度 ), row1, col3 ) # 更新布局和坐标轴 fig.update_layout( height450, width1200, title_text电商数据综合仪表板, showlegendFalse ) # 精细化更新每个子图的坐标轴 fig.update_xaxes(title_text日期, tickformat%m-%d, row1, col1) fig.update_yaxes(title_text销售额 (元), row1, col1) fig.update_xaxes(title_text商品类别, row1, col2) fig.update_yaxes(title_text销售额 (元), row1, col2) fig.update_xaxes(title_text小时, row1, col3) fig.update_yaxes(title_text日期 (第几天), row1, col3) fig.show()在这个例子中specs[[{“type”: “scatter”}, {“type”: “bar”}, {“type”: “heatmap”}]]明确指定了三个子图的类型。column_widths参数用于调整子图的相对宽度这对于确保热力图等宽高比敏感的图表显示正常非常有用。3.2 深度控制解决“修改x轴密度”与热力图参数现在我们来深入解决热词中提到的问题。首先是“修改x轴密度”。这通常发生在时间序列数据中当数据点过于密集或稀疏时默认的刻度标签会显得拥挤或稀疏。我们需要通过update_xaxes或update_yaxes方法使用dtick、tick0、nticks等参数进行控制。# 接上例假设我们对第一个子图销售额趋势的X轴密度不满意 fig.update_xaxes( row1, col1, dtickM1, # 将刻度间隔设置为1个月。其他选项如 D7(7天), H12(12小时) tickformat%Y-%m-%d, # 刻度标签格式 tickangle45, # 刻度标签旋转45度防止重叠 tickmodelinear # 线性模式配合dtick使用 )对于热力图参数控制更为关键。热词中提到了“plotly heatmap参数”和“plotly热力图强度轴”。热力图的核心参数包括z: 二维数据矩阵。x,y: 对应于z矩阵列和行维度的标签。colorscale: 颜色映射如‘Viridis’,‘Plasma’,‘RdBu’,‘Picnic’等。zmin,zmax:这就是控制“强度轴”范围的关键参数默认情况下颜色映射的范围是z数据的最小值和最大值。但有时为了统一多张热力图的颜色标尺或者突出特定范围我们需要手动设置。# 精细化控制上例中的热力图 fig.update_traces( # 选择 heatmap 类型的轨迹进行更新 selectordict(typeheatmap), # 设置颜色映射范围使颜色对比更明显 zmin0, zmax100, # 更换颜色方案 colorscalePlasma, # 显示每个单元格的数值 texttemplate%{z:.0f}, textfont{size: 10}, hoverongapsFalse ) # 更新颜色条 fig.update_layout( coloraxis_colorbardict( title活跃度, thicknessmodepixels, thickness20, lenmodepixels, len300, yanchortop, y1, ticksoutside ) )zmin和zmax强制规定了颜色映射的数据范围。低于zmin的值会显示为颜色尺度的最低端颜色高于zmax的值显示为最高端颜色。这对于比较多个具有不同数据范围的热力图至关重要。4. 实战构建一个完整的关联分析与热力图仪表板让我们综合运用以上知识构建一个更复杂的实战案例分析一个数据集里多个数值变量的相关性并用子图展示相关性矩阵热力图、关键变量散点图以及分布直方图。4.1 数据准备与相关性计算import pandas as pd import numpy as np import plotly.graph_objects as go from plotly.subplots import make_subplots import plotly.express as px # 生成模拟数据4个具有相关性的变量 np.random.seed(42) n 200 data pd.DataFrame({ Feature_A: np.random.randn(n) * 10 50, Feature_B: 0.6 * np.random.randn(n) * 8 30 0.7 * (np.random.randn(n) * 10 50), # 与A相关 Feature_C: np.random.randn(n) * 5 20, Feature_D: -0.5 * np.random.randn(n) * 12 40 0.3 * (np.random.randn(n) * 10 50), # 与A负相关 }) # 计算相关性矩阵 corr_matrix data.corr().round(2)4.2 设计复合子图布局我们的目标是创建一个2x2的布局但左上角放一个大的热力图其他位置放散点图和直方图。# 定义布局第一行热力图占两列第二行两个散点图第三行两个直方图不我们用2x2但热力图占左上角两格。 # 更清晰的布局1行2列但左边是热力图右边是垂直排列的散点图和直方图组合。 # 我们可以用更灵活的网格2行2列但热力图占据第一行。 fig make_subplots( rows2, cols2, specs[ [{type: heatmap, colspan: 2}, None], # 热力图占据第一行两列 [{type: scatter}, {type: bar}] # 第二行左散点图右直方图 ], column_widths[0.5, 0.5], row_heights[0.6, 0.4], # 第一行高度占比60%第二行40% subplot_titles(特征相关性矩阵热力图, Feature_A vs Feature_B 散点图, Feature_A 分布直方图), vertical_spacing0.15, horizontal_spacing0.1 )4.3 填充图表与高级定制# 1. 添加相关性热力图 feature_names corr_matrix.columns.tolist() fig.add_trace( go.Heatmap( zcorr_matrix.values, xfeature_names, yfeature_names, textcorr_matrix.values, # 在单元格内显示数值 texttemplate%{text:.2f}, # 数值格式 textfont{size: 12, color: white}, colorscaleRdBu, # 红蓝渐变色常用于表示正负相关 zmid0, # 将颜色映射的中点设为0正负相关颜色分明 zmin-1, zmax1, colorbardict( title相关系数, x1.05, # 将颜色条稍微右移避免与图重叠 len0.6 ), hoverongapsFalse ), row1, col1 ) # 2. 添加散点图展示A和B的关系 fig.add_trace( go.Scatter( xdata[Feature_A], ydata[Feature_B], modemarkers, markerdict( size8, colordata[Feature_C], # 用第三个特征的值作为颜色维度 colorscaleViridis, showscaleTrue, # 显示颜色条 colorbardict( titleFeature_C, x1.02, # 散点图颜色条位置 len0.6 ), linedict(width0.5, colorDarkSlateGrey) ), nameA vs B, hovertemplatebA/b: %{x:.1f}brbB/b: %{y:.1f}brbC/b: %{marker.color:.1f}extra/extra ), row2, col1 ) # 3. 添加直方图展示A的分布 fig.add_trace( go.Histogram( xdata[Feature_A], nbinsx20, marker_colorlightseagreen, opacity0.7, nameDist of A, hovertemplate区间: %{x}br计数: %{y}extra/extra ), row2, col2 ) # 4. 全面更新布局和坐标轴 fig.update_layout( title_text多变量数据分析仪表板, height750, width1000, showlegendFalse, # 统一模板让图表更专业 templateplotly_white ) # 更新热力图的坐标轴第一行 fig.update_xaxes(title_text特征, row1, col1, sidetop) fig.update_yaxes(title_text特征, row1, col1, autorangereversed) # 反转Y轴以使矩阵对角线从左上到右下 # 更新散点图的坐标轴第二行第一列 fig.update_xaxes(title_textFeature_A, row2, col1) fig.update_yaxes(title_textFeature_B, row2, col1) # 更新直方图的坐标轴第二行第二列 fig.update_xaxes(title_textFeature_A 取值, row2, col2) fig.update_yaxes(title_text频数, row2, col2) fig.show()这个例子展示了如何将热力图、散点图、直方图三种图表类型有机组合在一个视图中。我们通过specs和row_heights/column_widths控制了布局通过update_xaxes/update_yaxes对每个子图的坐标轴进行了独立且精细的定制并通过update_traces和update_layout统一了样式。特别是热力图中zmin-1, zmax1, zmid0的设置完美地呈现了相关性系数的范围使得正相关和负关系一目了然这正是对“热力图强度轴”的精准控制。5. 避坑指南与性能优化在实际使用Plotly子图尤其是绘制大量数据或复杂布局时你可能会遇到一些挑战。以下是我在实践中总结的几个关键点和解决方案。5.1 内存与渲染性能当子图数量众多比如超过10个或者每个子图包含数万甚至更多数据点时浏览器渲染可能会变慢甚至导致页面无响应。优化策略1数据采样与聚合对于折线图、散点图如果数据点过于密集人眼无法分辨反而影响性能。可以在添加数据前进行降采样。# 假设有10万个点 raw_x np.linspace(0, 10, 100000) raw_y np.sin(raw_x) # 降采样到2000个点 sample_indices np.linspace(0, len(raw_x)-1, 2000, dtypeint) sampled_x raw_x[sample_indices] sampled_y raw_y[sample_indices] fig.add_trace(go.Scatter(xsampled_x, ysampled_y, modelines), row1, col1)优化策略2使用Scattergl替代Scatter对于包含大量散点的子图使用go.ScatterglWebGL渲染替代go.ScatterSVG渲染可以极大提升渲染性能尤其是在需要交互如缩放、平移时。fig.add_trace( go.Scattergl(xlarge_x, ylarge_y, modemarkers, marker_size2), row1, col1 )优化策略3避免在循环中频繁更新布局一个常见的反模式是在添加每个轨迹后都调用fig.update_layout。这会导致布局被重复计算和渲染。最佳实践是等所有轨迹添加完毕后一次性更新布局。# 不推荐 for i in range(5): fig.add_trace(..., rowi//31, coli%31) fig.update_layout(title_textfAdding trace {i}) # 每次循环都更新 # 推荐 for i in range(5): fig.add_trace(..., rowi//31, coli%31) # 所有轨迹添加完毕后一次性更新 fig.update_layout(title_textMy Subplot Dashboard, height800, ...)5.2 坐标轴引用与更新冲突在拥有多个坐标轴的复杂子图中Plotly会为每个子图自动生成独立的X轴和Y轴对象它们的引用名称为‘x’,‘x2’,‘x3’… 和‘y’,‘y2’,‘y3’…。当你使用fig.update_xaxes()时如果不指定row和col默认会更新所有X轴这通常不是你想要的结果。正确做法始终使用row和col精确定位# 危险更新了所有子图的X轴范围 fig.update_xaxes(range[0, 100]) # 安全只更新第2行第1列子图的X轴 fig.update_xaxes(range[0, 100], row2, col1)如果你需要批量更新同一行或同一列的坐标轴可以使用selector参数配合matches关键字但直接使用row和col在大多数情况下更清晰可靠。5.3 图例Legend的管理当子图中包含多个图例项时它们可能会相互重叠或显得杂乱。Plotly的图例是全局的针对整个Figure但你可以控制哪些轨迹显示在图例中。隐藏特定轨迹的图例在add_trace时设置showlegendFalse。统一管理图例位置和样式在update_layout中使用legend参数。fig.update_layout( legenddict( orientationh, # 水平排列 yanchorbottom, y-0.2, # 将图例放在画布下方 xanchorcenter, x0.5, bgcolorrgba(255,255,255,0.8) # 半透明背景 ) )对于非常复杂的仪表板有时彻底关闭全局图例而在每个子图内用注释annotation或单独的文本来说明可能是更清晰的选择。5.4 导出与静态化Plotly图表默认是交互式的HTML。如果需要嵌入报告或论文可能需要导出为静态图片PNG、JPEG、SVG。# 导出为高分辨率PNG fig.write_image(my_subplot_dashboard.png, width1200, height800, scale2) # scale2 表示2倍分辨率 # 导出为PDF或SVG矢量图无限缩放 # fig.write_image(dashboard.pdf) # fig.write_image(dashboard.svg)注意write_image功能需要安装kaleido包pip install kaleido这是一个跨平台的静态图像导出引擎。这是官方推荐且最稳定的导出方式比之前依赖orca命令行工具的方法要简单可靠得多。绘制子图是构建复杂数据仪表板和进行多维度对比分析的基础技能。从简单的网格排列到混合图表类型的复杂布局Plotly提供了强大而灵活的工具集。核心在于理解make_subplots构建的画布框架以及熟练运用add_trace、update_layout、update_xaxes/update_yaxes来填充和修饰这个框架。记住好的子图设计不仅仅是技术的堆砌更是对数据叙事逻辑的体现。在动手之前先花点时间规划一下你想通过这张图向观众传达什么信息哪些图表需要并列对比哪些坐标轴应该共享思考清楚这些问题再配合Plotly提供的这些精细控制选项你就能创造出既专业又富有洞察力的可视化作品。
)
