如何在Python的Plotly图表中嵌入HTML并确保导出后保留？

我正在Python中构建Plotly图表，希望在其中添加HTML内容，使得将图表导出为HTML文件后，该HTML内容仍能显示。我不需要将其设为图表标题，而是要添加一段HTML字符串到Plotly图表中。

以下是示例代码，在Jupyter Notebook中运行时一切正常，但由于HTML字符串并未真正成为Plotly图表的一部分，导出为fig.html后该HTML内容不会显示。

import plotly.express as px
from IPython.display import display, HTML

display(HTML('<h1>Hello, world!</h1>'))

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')
fig.show()
fig.write_html('fig.html')

方法一：通过注释嵌入HTML内容 #

Plotly的注释功能支持直接插入HTML字符串，只需将注释的text参数设为你的HTML内容，并调整定位参数将其放在合适位置：

import plotly.express as px

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')

# 添加HTML注释，定位在图表上方居中位置
fig.add_annotation(
    text='<h1>Hello, world!</h1>',
    xref='paper', yref='paper',  # 基于整个图表区域定位
    x=0.5, y=1.15,  # x=0.5水平居中，y=1.15在图表顶部外侧
    showarrow=False,  # 隐藏箭头
    font=dict(size=16)
)

fig.write_html('fig.html')

这种方式的优势是HTML内容会和图表绑定在一起，导出后会随着图表一起显示，适合添加和图表关联的说明性内容。

方法二：自定义HTML模板导出 #

如果需要更灵活的布局（比如在图表前后添加独立的HTML区块），可以自定义导出的HTML模板，将你的HTML内容插入到模板的对应位置：

import plotly.express as px

data_canada = px.data.gapminder().query("country == 'Canada'")
fig = px.bar(data_canada, x='year', y='pop')

# 自定义HTML模板，{plotly_js}和{plot_div}是Plotly的占位符，会自动替换为图表代码
custom_template = """
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Custom Plotly Chart</title>
    {plotly_js}
</head>
<body>
    <div style="text-align:center; margin-bottom:20px;">
        <h1>Hello, world!</h1>
        <p>这是一段自定义的HTML内容</p>
    </div>
    {plot_div}
</body>
</html>
"""

# 使用自定义模板导出HTML文件
fig.write_html(
    'fig.html',
    full_html=True,
    template=custom_template
)

这种方法可以完全控制导出HTML的结构，你可以添加任意HTML元素、CSS样式，适合需要复杂页面布局的场景。

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