将带有小部件的交互式散景图导出为独立 HTML



我正在寻找一种方法来导出我的Jupyter Notebook,其中包含带有小部件的交互式散景图到独立的HTML。当使用位于工具栏中的Jupyter NB"下载到"HTML功能时,除了交互式散景图外,其他所有内容都可以很好地导出静态散景图(静态图也是"交互式"的,但基础数据不会改变(

如何获得带有独立 HTML 中的小部件的交互式绘图?

您可以在下面找到安装了散景13.0的Jupyter Notebook中的工作示例。

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_notebook((更改为output_file('tryout.html'(,它会产生以下错误,我不明白,也可以找到解决方案:

运行时错误:没有为笔记本类型"无"安装显示挂钩

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

提前感谢!

你所要求的是不可能的,至少我理解你的问题是不可能的。您已经创建了一个散景服务器应用程序,其中包含真实的 Python 代码回调。独立的HTML文档不可能运行真正的Python代码,因为浏览器没有任何能力运行Python代码。真正的 Python 代码回调需要一个实时的、正在运行的 Python 解释器进程。当您在笔记本中嵌入散景服务器应用程序时,如上所述,该过程就是IPython内核。

如果您只是想要一个可以在笔记本之外运行的散景服务器应用程序(需要在散景服务器上运行,因为这是运行回调的 Python 进程(,最简单的方法是将所有代码放在您运行的脚本中

bokeh serve --show myapp.py

此类应用程序的粗略概述是:

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脚本中嵌入散景服务器应用程序。为此,请参阅将散景服务器嵌入为库。

最新更新