使用 plotly 将 Jupyter 笔记本导出到 html 离线时无法正确显示
Exporting Jupyter notebook with plotly to html not displaying correctly when offline
我正在使用 Jupyter lab,即使我处于离线状态,在 jupyter lab 中一切正常。但是,每当我尝试将报告导出到 HTML 时。不呈现情节图。如果我打开我的互联网连接,绘图就会呈现出来,就好了。
这是一个示例代码:
import pandas as pd
import numpy as np
import plotly.express as px
df = pd.DataFrame(np.random.randn(100,4), columns='A B C D'.split())
px.scatter(df, x='A',y='B')
我已尝试按照情节显示的故障排除指南进行操作 here。此外,我尝试在全新环境中安装。
如果我使用以下内容:
import plotly.io as pio
pio.renderers.default = "jupyterlab"
离线HTML包括静态情节,但我非常希望启用交互性。
我注意到文件大小不同,静态页面只有 700 Kb 左右,而当我尝试将它们保存为交互式文件时,它们大约为 4 Mb。
这在 Jupyter 实验室中不可能吗?还是我遗漏了什么
当您尝试将其导出到 HTML 时,请不要忘记 jupyter 的方式 (.html)。此外,通过 jupyter 上的“打开方式”按钮,您可以看到它可以处理的最大文件大小。而且很可能存储不会成为问题。
如果你想在离线时也能有交互性,你需要在输出html中添加plotly.js。
你可以这样实现:
import plotly.io as pio
pio.renderers.default='notebook'
实际上,这应该在 JupyterLab 上默认完成(您可以看出文件大小增加了。在您的情况下,它将 >4MB)。因此,如果这不起作用,我怀疑存在错误。我想我也经历过类似的事情。这是使用您的示例并将其导出到 html:
时我的浏览器控制台输出
出于某种原因,包含的 plotly.js
似乎依赖于 require.js
,由于某种原因 未 包含在 html 导出中.相反,您的页面将尝试从 CDN 加载它,但在您离线时会失败(如屏幕截图所示)。
现在,您可以做的是手动包含 require.js
的本地版本。获取副本 here。然后,在您的笔记本顶部添加以下内容:
%%HTML
<script src="require.js"></script>
然后,将您的笔记本导出到 html。确保它与您之前下载的 require.js
文件位于同一文件夹中,然后在浏览器中打开它。
控制台中应该不会再有错误消息,您的图表应该会出现并以交互方式工作:
/e:如果你想分享你的笔记本,这可能不是最佳选择,因为它需要你也分发 require.js
脚本。您也可以直接将整个脚本包含在笔记本中。只需将 %%js
单元格魔术放在代码单元格的顶部,然后将您下载的 require.js
文件的内容粘贴到下面即可。
我正在使用 Jupyter lab,即使我处于离线状态,在 jupyter lab 中一切正常。但是,每当我尝试将报告导出到 HTML 时。不呈现情节图。如果我打开我的互联网连接,绘图就会呈现出来,就好了。
这是一个示例代码:
import pandas as pd
import numpy as np
import plotly.express as px
df = pd.DataFrame(np.random.randn(100,4), columns='A B C D'.split())
px.scatter(df, x='A',y='B')
我已尝试按照情节显示的故障排除指南进行操作 here。此外,我尝试在全新环境中安装。
如果我使用以下内容:
import plotly.io as pio
pio.renderers.default = "jupyterlab"
离线HTML包括静态情节,但我非常希望启用交互性。 我注意到文件大小不同,静态页面只有 700 Kb 左右,而当我尝试将它们保存为交互式文件时,它们大约为 4 Mb。
这在 Jupyter 实验室中不可能吗?还是我遗漏了什么
当您尝试将其导出到 HTML 时,请不要忘记 jupyter 的方式 (.html)。此外,通过 jupyter 上的“打开方式”按钮,您可以看到它可以处理的最大文件大小。而且很可能存储不会成为问题。
如果你想在离线时也能有交互性,你需要在输出html中添加plotly.js。 你可以这样实现:
import plotly.io as pio
pio.renderers.default='notebook'
实际上,这应该在 JupyterLab 上默认完成(您可以看出文件大小增加了。在您的情况下,它将 >4MB)。因此,如果这不起作用,我怀疑存在错误。我想我也经历过类似的事情。这是使用您的示例并将其导出到 html:
时我的浏览器控制台输出出于某种原因,包含的 plotly.js
似乎依赖于 require.js
,由于某种原因 未 包含在 html 导出中.相反,您的页面将尝试从 CDN 加载它,但在您离线时会失败(如屏幕截图所示)。
现在,您可以做的是手动包含 require.js
的本地版本。获取副本 here。然后,在您的笔记本顶部添加以下内容:
%%HTML
<script src="require.js"></script>
然后,将您的笔记本导出到 html。确保它与您之前下载的 require.js
文件位于同一文件夹中,然后在浏览器中打开它。
控制台中应该不会再有错误消息,您的图表应该会出现并以交互方式工作:
/e:如果你想分享你的笔记本,这可能不是最佳选择,因为它需要你也分发 require.js
脚本。您也可以直接将整个脚本包含在笔记本中。只需将 %%js
单元格魔术放在代码单元格的顶部,然后将您下载的 require.js
文件的内容粘贴到下面即可。