将带有 plotly 的 Jupyter 笔记本导出为 html 离线时无法正确显示

问题描述

我正在使用 Jupyter 实验室,即使我处于离线状态,在 jupyter 实验室中也一切正常。但是,每当我尝试将报告导出为 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 实验室中是不可能的吗?还是我错过了什么

解决方法

如果你希望离线时也能进行交互,你需要将 plotly.js 添加到输出 html 中。 你可以这样实现:

import plotly.io as pio
pio.renderers.default='notebook'

实际上,这应该在 JupyterLab 上默认完成(您可以看出文件大小增加了。在您的情况下,它将大于 4MB)。因此,如果这不起作用,我怀疑存在错误。我想我也经历过类似的事情。这是使用您的示例并将其导出为 html 时的浏览器控制台输出:

Screenshot displaying browser error when loading plotly

出于某种原因,包含的 plotly.js 似乎依赖于 require.js,出于某种原因,它包含在 html 导出中。相反,您的页面会尝试从 CDN 加载它,但在您离线时会失败(如屏幕截图所示)。

现在,您可以手动包含本地版本的 require.js。获取副本 here。然后,在您的笔记本中,在顶部添加以下内容:

%%HTML
<script src="require.js"></script>

然后,将您的笔记本导出为 html。确保它与您之前下载的 require.js 文件位于同一文件夹中,并在浏览器中打开它。
控制台中不应再有错误消息,您的图表应显示并以交互方式工作:

Screenshot showing plotly chart working using solution

/e:如果您想共享您的笔记本,这可能不是最佳选择,因为它还需要您分发 require.js 脚本。您也可以直接在笔记本中包含整个脚本。只需将 %%js 单元格魔法放在代码单元格的顶部,然后将您下载的 require.js 文件的内容粘贴到其下方。

,

当您尝试将其导出为 HTML 时,请不要忘记 jupyter 的方式 (.html)。同样使用 jupyter 上的“打开方式”按钮,您可以看到它可以处理的最大文件大小。而且很可能存储不是问题。

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...