將帶有 plotly 的 Jupyter 筆記本導出到 html 離線時無法正確顯示

Question

我正在使用 Jupyter 實驗室，即使我處於離線狀態，jupyter 實驗室也能正常工作。 但是，每當我嘗試將報告導出到 HTML 時。 plotly 圖未呈現。 如果我打開我的互聯網連接，就會渲染出圖，就好了。

這是一個示例代碼：

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')

我已嘗試按照此處顯示的 plotly 的故障排除指南進行操作。 此外，我嘗試在新環境中安裝。

如果我使用以下內容：

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

離線 HTML 包括 static plot，但是我非常希望啟用交互性。 我注意到文件大小不同，static 頁面只有大約 700 Kb，而當我嘗試將它們保存為交互式時，它們大約為 4 Mb。

這在 Jupyter 實驗室中是不可能的嗎？ 還是我錯過了什么

Answer 1

如果你想在離線的時候也能有交互，你需要將 plotly.js 添加到 output html 中。 你可以這樣實現：

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

實際上，這應該在 JupyterLab 上默認完成（您可以看出增加的文件大小。在您的情況下，它將> 4MB）。 所以如果這不起作用，我懷疑是一個錯誤。 我想我經歷過類似的事情。 這是我的瀏覽器控制台 output 使用您的示例並將其導出到 html 時：

出於某種原因，包含的plotly.js似乎依賴於require.js ，而由於某種原因，它未包含在 html 導出中。 相反，您的頁面將嘗試從離線時失敗的 CDN 加載它（如屏幕截圖所示）。

現在，您可以做的是手動包含本地版本的require.js 。 在此處獲取副本。 然后，在您的筆記本中在頂部添加以下內容：

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

然后，將您的筆記本導出到 html。 確保它與您之前下載的require.js文件位於同一文件夾中，然后在瀏覽器中打開它。
控制台中應該不再有錯誤消息，並且您的圖表應該會出現並以交互方式工作：

/e：如果您想共享您的筆記本，這可能不是最佳選擇，因為它還需要您分發require.js腳本。 您也可以直接將整個腳本包含在筆記本中。 只需將%%js單元格魔法放在代碼單元格的頂部，然后將您下載的require.js文件的內容粘貼到下面。

Answer 2

當您嘗試將其導出到 HTML 時，請不要忘記 jupyter 的方式 (.html)。 同樣使用 jupyter 上的“打開方式”按鈕，您可以看到它可以處理的最大文件大小。 而且很可能存儲不會成為問題。