如何在Jupyter Notebook中显示Plotly生成的HTML文件？

问题原因 #

你生成HTML时使用了full_html=False和include_plotlyjs='cdn'，得到的是仅包含图表渲染逻辑的代码片段，没有完整的HTML结构（如<head>中的CDN引用）。Chrome浏览器打开时会自动补全基础HTML结构并加载CDN资源，但Jupyter的HTML组件不会自动处理外部CDN的加载，导致渲染时找不到Plotly对象。

解决方法 #

方法1：修改HTML生成逻辑，内嵌Plotly.js

将include_plotlyjs设为True（直接内嵌Plotly.js到HTML片段），这样生成的文件无需依赖外部CDN，直接在Jupyter中即可渲染：

import plotly.express as px

fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
# 内嵌Plotly.js到HTML片段
fig.write_html("px.html", full_html=False, include_plotlyjs=True)

之后继续使用原来的代码显示即可：

from IPython.display import display, HTML
display(HTML(filename="px.html"))

方法2：在Jupyter中手动加载Plotly.js CDN

如果不想修改已生成的HTML文件，可以先在Notebook中加载CDN的Plotly.js，再显示HTML片段：

from IPython.display import display, HTML
# 先加载Plotly.js的CDN资源
display(HTML('<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>'))
# 再显示目标HTML文件
display(HTML(filename="px.html"))

方法3：用IFrame加载完整HTML文件

如果生成HTML时改为full_html=True（生成完整的HTML页面），可以用IFrame直接嵌入显示：

# 先重新生成完整HTML文件
import plotly.express as px
fig = px.scatter(x=[0, 1, 2, 3, 4], y=[0, 1, 4, 9, 16])
fig.write_html("px_full.html", full_html=True, include_plotlyjs='cdn')

# 在Notebook中用IFrame显示
from IPython.display import IFrame
IFrame(src="px_full.html", width=800, height=600)

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