如何使用Python合并两个Plotly图表导出的HTML文件？

当然有办法合并这两个Plotly HTML文件，不过并没有像PyPDF2那样专门的一键合并库——毕竟HTML的结构比PDF灵活得多，得针对Plotly生成的HTML结构来处理，下面给你两种实用方案：

方法一：合并已生成的HTML文件（针对你已存好文件的场景） #

每个Plotly导出的HTML文件，核心结构包含三部分：Plotly.js依赖引入、存储图表数据的<div>标签、初始化图表的脚本。合并的核心思路是只保留一份Plotly.js依赖，把两个图表的DOM元素和初始化脚本整合到同一个页面里。

可以用Python脚本自动处理，示例代码如下：

def merge_plotly_html(file1, file2, output_file):
    # 读取第一个HTML，提取头部（含Plotly依赖）和第一个图表的内容
    with open(file1, 'r', encoding='utf-8') as f:
        content1 = f.read()
    # 拆分头部和主体内容
    head_end_idx = content1.find('</head>')
    head_content = content1[:head_end_idx + 7]  # 包含</head>标签
    body_start_idx = content1.find('<body>')
    body_end_idx = content1.find('</body>')
    body_content1 = content1[body_start_idx:body_end_idx]

    # 读取第二个HTML，只提取图表相关的主体内容（跳过重复的依赖引入）
    with open(file2, 'r', encoding='utf-8') as f:
        content2 = f.read()
    body_start2_idx = content2.find('<body>')
    body_end2_idx = content2.find('</body>')
    body_content2 = content2[body_start2_idx + 6 : body_end2_idx]  # 跳过<body>标签

    # 拼接成完整的合并HTML
    merged_content = f"""
{head_content}
<body>
{body_content1}
<hr> <!-- 可选：添加分隔线区分两个图表 -->
{body_content2}
</body>
</html>
"""
    # 写入输出文件
    with open(output_file, 'w', encoding='utf-8') as f:
        f.write(merged_content)

# 调用示例
merge_plotly_html("chart1.html", "chart2.html", "merged_charts.html")

注：这是简化版脚本，如果你的Plotly HTML是本地引入Plotly.js而非CDN，可能需要微调提取逻辑，但核心逻辑不变——复用一次依赖，合并图表的DOM和初始化代码。

方法二：生成图表时直接合并（更高效的方案） #

如果还能重新生成图表，直接在Python里把两个图表的HTML内容整合到同一个页面，无需先导出再合并：

import plotly.graph_objects as go
from plotly.io import to_html

# 假设你已经有两个图表对象fig1、fig2
fig1 = go.Figure(data=[go.Bar(x=[1,2,3], y=[4,5,6])])
fig2 = go.Figure(data=[go.Scatter(x=[1,2,3], y=[6,5,4])])

# 获取不带完整HTML结构的图表片段
chart1_html = to_html(fig1, full_html=False)
chart2_html = to_html(fig2, full_html=False)

# 组合成自定义的完整HTML页面
merged_html = f"""
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <title>合并后的Plotly图表</title>
</head>
<body>
    <h3>图表1：柱状图</h3>
    {chart1_html}
    <hr style="margin: 20px 0;">
    <h3>图表2：折线图</h3>
    {chart2_html}
</body>
</html>
"""

# 保存合并后的文件
with open('merged_charts.html', 'w', encoding='utf-8') as f:
    f.write(merged_html)

这种方式更可控，你可以自由添加标题、样式、分隔元素，让页面布局更清晰。

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