使用 Bokeh、Jupyter Notebook 和 Pelican 进行交互式绘图

Question

我使用 Bokeh 创建了一个带有交互式绘图的 jupyter 笔记本。 示例笔记本如下所示：

import pandas as pd
import numpy as np
from bokeh.plotting import figure, show
from bokeh.charts import ColumnDataSource
from bokeh.io import output_file
from bokeh.models import HoverTool 

df = pd.DataFrame(np.random.normal(0,5,(100,2)),columns=['x','y'])

output_notebook()

source = ColumnDataSource(df)
hover = HoverTool(
        tooltips=[
            ("x", "@x"),
            ("y", "@y"),
        ]
    )
p = figure(plot_width=800, plot_height=500, tools=[hover])

p.circle('x', 'y', size=7, fill_alpha=0.5,source=source)

show(p)

事情在笔记本本身上运行，并且图形是交互式的。

我正在使用带有 pelican-ipynb 插件 (https://github.com/danielfrg/pelican-ipynb) 的 pelican 静态网站生成器，以便将笔记本转换为 html。创建 html 时，散景图不显示。我似乎无法弄清楚如何使用交互式散景图获取 html。我检查了 html，在 show(p) 行之后没有任何内容。

如何让 pelican 使用 Bokeh 绘图？

Answer 1

Bokeh 将 JavaScript 用于交互部分的客户端 (BokehJS)，当您将笔记本导出到 Bokeh 外的 HTML 时，不会嵌入 JS 代码。

您需要使用 Bokeh 自己的函数将 Bokeh 代码导出为 HTML 以生成 standalone HTML。
要生成 HTML，只需添加到您的代码中：

from bokeh.resources import CDN
from bokeh.embed import file_html 
p_html = file_html(p, CDN)

例如，请参阅 this Jupyter Notebook 以及您的原始代码和生成的 HTML（太长，无法将其嵌入 SO，对于您的简单示例，大约 45 K 个字符）。