使用nbconvert转换Jupyter Notebook为HTML时Plotly交互图表不显示求助

我在Jupyter Notebook中编写了以下Plotly代码：

import plotly.express as px

fig = px.scatter(x=[1,2,3], y=[1,2,3])
fig.show()

尝试用命令jupyter nbconvert --to html --execute try.ipynb转换为HTML后，Markdown内容、代码块及其他库的图表都能正常显示，但Plotly交互式图表无法显示。

此前尝试过添加代码：

import plotly.io as pio
pio.renderers.default = "notebook_connected"

以及执行命令：

jupyter nbconvert --to html --execute --template classic --embed-images try.ipynb

均未解决问题。将渲染器设为"svg"时图表可显示，但我需要交互式图表。实际场景需生成包含多图表、表格及Markdown的HTML报告。

问题原因 #

notebook_connected渲染器依赖外部CDN加载Plotly的JavaScript资源，nbconvert转换HTML时可能未正确引入这些资源，或者环境无法访问CDN，导致交互式图表的JS代码加载失败，无法渲染。而svg是静态图像格式，不需要依赖JS，因此能正常显示。

解决方法 #

方法1：使用html渲染器嵌入本地JS资源 #

修改Notebook中的代码，将默认渲染器设为html，该渲染器会把Plotly的JS资源直接嵌入到HTML文件中，不依赖外部CDN：

import plotly.express as px
import plotly.io as pio

# 设置默认渲染器为html，确保交互式资源嵌入本地
pio.renderers.default = "html"

fig = px.scatter(x=[1,2,3], y=[1,2,3])
fig.show()

然后执行原转换命令即可：

jupyter nbconvert --to html --execute try.ipynb

方法2：使用notebook渲染器并优化配置 #

如果偏好notebook渲染器，可以调整配置确保资源正确加载：

import plotly.express as px
import plotly.io as pio

# 使用notebook渲染器，强制嵌入所需资源
pio.renderers.default = "notebook"
# 可选配置：隐藏图表的链接信息
pio.renderers["notebook"].config = {"showLink": False, "linkText": ""}

fig = px.scatter(x=[1,2,3], y=[1,2,3])
fig.show()

转换时使用默认模板即可，无需指定classic模板：

jupyter nbconvert --to html --execute try.ipynb

方法3：手动生成HTML片段并嵌入 #

直接将Plotly图表转换为HTML字符串，通过IPython的display函数嵌入到Notebook中，确保转换后的HTML包含完整的交互式内容：

import plotly.express as px
import plotly.io as pio
from IPython.display import HTML

fig = px.scatter(x=[1,2,3], y=[1,2,3])
# 生成不包含完整HTML结构的图表片段
fig_html = pio.to_html(fig, full_html=False)
# 显示图表
display(HTML(fig_html))

执行转换命令后，图表的交互式内容会直接嵌入到HTML报告中。

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