将带有小部件的交互式Bokeh图导出到独立HTML

Question

我正在寻找一种方法来导出我的Jupyter笔记本，其中包含带有小部件的交互式Bokeh情节到独立的HTML。当使用位于工具栏中的Jupyter NB“下载到”HTML函数时，除了交互式Bokeh图外，所有的东西都能很好地导出，静态Bokeh图也能导出（静态图也是“交互式”的，但底层数据不会改变）

如何在独立HTML中使用小部件获得交互图？

下面你可以在Jupyter笔记本中找到一个安装了Bokeh13.0的工作示例。

import numpy as np
import pandas as pd

from bokeh.io import save, curdoc,output_file ,show, output_notebook, push_notebook
from bokeh.plotting import figure, gridplot

from bokeh.models import ColumnDataSource, Panel
from bokeh.models.widgets import Slider, Tabs, DataTable, TableColumn
from bokeh.layouts import layout, WidgetBox
from bokeh.application.handlers import FunctionHandler
from bokeh.application import Application
# output_file('tryout.html')
output_notebook()

# Static Bokeh plot:
data = pd.DataFrame(np.random.random([10,2]),columns=['x','y'])
dataMean = pd.DataFrame([],columns=['mean','std'])

dataMean.loc[:,'mean'] =data.mean()
dataMean.loc[:,'std'] =data.std()        
src1 = ColumnDataSource(data)
src2 = ColumnDataSource(dataMean)

p = figure(plot_width = 700, plot_height = 400, 
title = 'Test case',x_axis_label = 'x', y_axis_label = 'y')

p.line(source=src1,y='y',x='x',color='blue',line_width=2)
p.circle(source=src1,y='y',x='x',color='green')

columnsT = [TableColumn(field="mean", title="mean"),
        TableColumn(field="std", title='std')]
data_table = DataTable(source=src2, columns=columnsT, width=400, height=400)    
data_table.index_position = None
controls = WidgetBox(data_table)    
layO = layout([[p],[controls]])
# Make a tab with the layout 
tab1 = Panel(child=layO, title = 'test')
tabs = Tabs(tabs=[tab1])
show(tabs)

# Now the same plot, but fitted with a slider widget
def modify_doc(doc):

    def make_dataset(N = 2):

        data = pd.DataFrame(np.random.random([N,2]),columns=['x','y'])
        dataMean = pd.DataFrame([],columns=['mean','std'])

        dataMean.loc[:,'mean'] =data.mean()
        dataMean.loc[:,'std'] =data.std()        
        return ColumnDataSource(data),ColumnDataSource(dataMean)

    def make_plot(src):
        # Blank plot with correct labels
        p = figure(plot_width = 700, plot_height = 400, 
                  title = 'Test case',x_axis_label = 'x', y_axis_label = 'y')

        p.line(source=src,y='y',x='x',color='blue',line_width=2)
        p.circle(source=src,y='y',x='x',color='green')
        return p
    def update(attr, old, new):
        new_src, new_src2 = make_dataset(N_select.value)

        src.data.update(new_src.data)
        src2.data.update(new_src2.data)

    N_select = Slider(start = 2, end = 20, step = 1, value = 2, title = 'number of points',width=700)
    N_select.on_change('value', update)    

    columnsT = [
        TableColumn(field="mean", title="mean"),
        TableColumn(field="std", title='std')]

    src, src2 = make_dataset(N_select.value)
    data_table = DataTable(source=src2, columns=columnsT, width=400, height=400)    
    data_table.index_position = None

    p = make_plot(src)
    # Put controls in a single element
    controls = WidgetBox(N_select,data_table)
    layO = layout([[p],[controls]])
    # Make a tab with the layout 
    tab1 = Panel(child=layO, title = 'test')  
    tabs = Tabs(tabs=[tab1])    
    doc.add_root(tabs)
handler= FunctionHandler(modify_doc)
app = Application(handler)
show(app)

如果我将output_totebook()更改为output_file('tryout.html')，它会给我以下错误，我不理解这个错误，也可以找到解决方法：

RuntimeError：没有为笔记本类型“无”安装显示挂钩

希望有人能帮我解决这个问题。

提前道谢！

Answer 1

你所要求的是不可能的，至少我理解你的问题是不可能的。您已经创建了一个Bokeh服务器应用程序，使用了真正的Python代码回调。独立的HTML文档不可能运行真正的Python代码，因为浏览器根本不具备运行Python代码的能力。真正的Python代码回调需要一个实时运行的Python解释器进程。当您在笔记本中嵌入一个bokeh服务器应用程序（如上面所做的那样）时，这个过程就是IPython内核。

如果您只是想要一个可以在笔记本外运行的Bokeh服务器应用程序（它需要运行在Bokeh服务器上，因为这是运行回调的Python进程），那么最简单的方法就是将所有代码放入一个您运行的脚本中

bokeh serve --show myapp.py

这类App非常粗略的轮廓是：

from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import Slider
from bokeh.plotting import figure

# create plots
plot = figure(...)

# create widgets
slider = Slider(...)

# add callbacks to widgets
def update(attr, old, new):
    pass
slider.on_change('value', update)

# put things in a layout
layout = column(slider, plot)

# add to curdoc
curdoc().add_root(layout)

或者，也可以在“常规”python脚本中嵌入Bokeh服务器应用程序。为此，请参见将Bokeh服务器嵌入为库。