使用nbconvert转换的部分HTML演示文稿无法显示Plotly图表

问题场景 #

在Jupyter Notebook中使用Plotly绘图时，先执行以下代码加载Plotly JS：

from IPython.display import Javascript
from plotly.offline import get_plotlyjs
Javascript(get_plotlyjs())

Notebook内图表显示正常，但执行以下命令将Notebook转为HTML幻灯片时：

jupyter nbconvert notebook.ipynb --to slides --no-prompt --embed-images

部分Notebook的图表缺失，同时出现警告：

python3.9/site-packages/nbconvert/filters/widgetsdatatypefilter.py:69: UserWarning: Your element with mimetype(s) dict_keys(['application/vnd.plotly.v1+json']) is not able to be represented.
  warn("Your element with mimetype(s) {mimetypes}"

解决方案 #

1. 强制输出静态图片

让Plotly生成PNG格式的静态图表，nbconvert能直接识别并嵌入：

• 单图表设置：

import plotly.io as pio
# 绘图后显示静态版本
fig.show(renderer="png")
# 可选：保存图片文件
pio.write_image(fig, "chart.png")

• 全局默认设置：

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

2. 使用Plotly专用nbconvert插件

安装plotly-nbconvert插件来处理Plotly格式的输出：

pip install plotly-nbconvert

转换时加上--execute参数确保重新执行Notebook生成可识别的输出：

jupyter nbconvert notebook.ipynb --to slides --no-prompt --embed-images --execute

3. 手动在HTML幻灯片中引入Plotly JS

转换完成后，打开生成的HTML文件，在<head>标签内添加Plotly的CDN链接：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

浏览器会加载JS来渲染存储在HTML中的Plotly JSON数据。

4. 规范Plotly初始化方式

替换原有的JS加载代码，使用Plotly官方的离线初始化方法，确保输出格式被nbconvert识别：

import plotly.offline as pyo
pyo.init_notebook_mode(connected=True)

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