如何使用Plotly在HTML页面中绘制多个CSV文件的可视化子图

核心逻辑：Plotly Express生成的独立图表无法直接嵌入子图网格，需要提取每个图表的迹（trace）后逐个添加到子图对应位置，最终统一导出即可。

操作步骤 #

• 导入所需依赖，调用make_subplots指定子图的行数、列数，可提前配置子图标题、坐标轴共享规则
• 读取各CSV文件，分别生成px散点图，注意修正原代码中变量名、文件名的笔误（原代码读取df1后调用scatter传入了不存在的df变量，第二个读取语句重复引用了第一个CSV文件路径）
• 遍历每个独立px图表的data属性，将其中的迹逐个添加到子图布局的指定行列位置，若多图分类维度一致可设置重复图例隐藏，避免图例冗余
• 按需调整总画布尺寸、总标题、图例位置、各子图坐标轴标签等布局参数
• 调用write_html方法导出自包含的HTML文件，本地直接打开即可正常交互查看

完整可运行代码示例 #

import pandas as pd
import plotly.express as px
from plotly.subplots import make_subplots

# 初始化子图布局，rows、cols按需修改
fig = make_subplots(
    rows=1,
    cols=2,
    subplot_titles=("第一个数据集散点图", "第二个数据集散点图"),
    # 如需共享坐标轴可打开对应注释
    # shared_xaxes=True,
    # shared_yaxes=True
)

# 读取数据生成单个散点图，替换成你实际的列名、文件路径
df1 = pd.read_csv('first_input.csv')
fig1 = px.scatter(df1, x="x_col1", y="y_col1", color="category_col")

df2 = pd.read_csv('second_input.csv')
fig2 = px.scatter(df2, x="x_col2", y="y_col2", color="category_col")

# 将迹添加到对应子图位置
for trace in fig1.data:
    fig.add_trace(trace, row=1, col=1)

for trace in fig2.data:
    # 两个图分类维度完全一致时，打开下面注释避免重复显示图例
    # trace.showlegend = False
    fig.add_trace(trace, row=1, col=2)

# 全局布局调整
fig.update_layout(
    height=600,
    width=1200,
    title_text="多CSV数据散点图合集",
    legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1)
)

# 按需设置各子图坐标轴标签
fig.update_xaxes(title_text="第一个图X轴", row=1, col=1)
fig.update_yaxes(title_text="第一个图Y轴", row=1, col=1)
fig.update_xaxes(title_text="第二个图X轴", row=1, col=2)
fig.update_yaxes(title_text="第二个图Y轴", row=1, col=2)

# 导出HTML，文件为自包含格式，直接打开即可查看
fig.write_html("combined_scatter_plots.html")

# 本地开发时可调用show直接预览
# fig.show()

补充说明：如果需要3个及以上子图，按照相同逻辑扩展rows、cols参数，把对应trace添加到目标行列即可。导出的HTML内置所有交互能力（悬停查看数值、图例点击筛选、缩放平移等），不需要额外部署服务就能正常使用。

内容的提问来源于stack exchange，提问作者amin