【导语】通过前两节基础的学习，本篇文章我们将会进阶学习bokeh服务器，滑块绑定绘图，根据下拉菜单选项更新绘图，按钮。最终实现bokeh构建交互式应用。
一、bokeh服务器
Bokeh Server 主要是在 Python 中创建绘图（例如 plots, ranges, axes, glyphs 等）。然后使用 Bokeh Server 启动运行绘图，在 python 和浏览器之间进行绘图数据的同步，这就是 Bokeh Server 的主要目的。
- Bokeh 服务器的适用场景
1、本地部署，个人使用：创建一个可以在本地运行的小应用程序，或者您可以将其发送给同事在本地运行。在这个场景中，Bokeh 服务器非常有用且易于使用。
2、创建可部署的应用服务：发布交互式数据可视化和应用程序，这些可视化和应用程序被大量用户使用（可能是在internet上，也可能是在公司内部网络上）。
3、分享发布：用于支持多用户，多应用的开发环境。一方面是构架可用于执行多个 Bokeh 服务实例的环境，另一个方面针对用户或应用，可进行有效的区分和管理。
建立 Bokeh 应用
如下，在桌面创建一个名为 ww.py 的文件，在cmd终端启动服务bokeh serve --show ww.py
from random import random
from bokeh.layouts import column
from bokeh.models import Button
from bokeh.palettes import RdYlBu3
from bokeh.plotting import figure, curdoc
p = figure(x_range=(0, 100), y_range=(0, 100), toolbar_location=None)
p.border_fill_color = 'black'
p.background_fill_color = 'black'
p.outline_line_color = None
p.grid.grid_line_color = None
r = p.text(x=[], y=[], text=[], text_color=[], text_font_size="26px",
text_baseline="middle", text_align="center")
i = 0
ds = r.data_source
def callback():
global i
new_data = dict()
new_data['x'] = ds.data['x'] + [random()*70 + 15]
new_data['y'] = ds.data['y'] + [random()*70 + 15]
new_data['text_color'] = ds.data['text_color'] + [RdYlBu3[i%3]]
new_data['text'] = ds.data['text'] + [str(i)]
ds.data = new_data
i = i + 1
button = Button(label="Press Me")
button.on_click(callback)
curdoc().add_root(column(button, p))
自动跳到浏览器，可以点击press me 按钮，会在图片中生成随机数，显示如下：
二、滑块绑定绘图
Bokeh 支持与基础组件集的直接集成。它们可以与 Bokeh Server 或 CustomJS 模型结合使用，以向 curdoc 添加更多的交互功能。
1、 滑块可以配置开始值和结束值，步长，初始值和标题
from bokeh.io import show, output_notebook
from bokeh.models import CustomJS, Slider
slider = Slider(start=0, end=10, value=1, step=.1, title="Stuff")
slider.js_on_change("value", CustomJS(code="""
console.log('slider: value=' + this.value, this.toString())
"""))
output_notebook()
show(slider)
2、两种使用组件回调功能的方法
①一个 CustomJS 回调。 这种方法适用于独立的 HTML 文档或 Bokeh 服务器应用程序。
滑块使用 CustomJS 回调的动作，该动作在滑块移动时都会更新数据源
from bokeh.plotting import figure
from bokeh.io import output_notebook,show
from bokeh.layouts import column
from bokeh.models import (
CustomJS,
ColumnDataSource,
Slider,
)
x = [x*0.005 for x in range(0, 201)]
source = ColumnDataSource(data=dict(x=x, y=x))
plot = figure(
plot_width=400,
plot_height=400
)
plot.line(
'x', 'y',
source=source,
line_width=3,
line_alpha=0.6
)
slider = Slider(
start=0.1,
end=6,
value=1,
step=.1,
title="power"
)
update_curve = CustomJS(
args=dict(source=source, slider=slider),
code="""
var data = source.data;
var f = slider.value;
var x = data['x']
var y = data['y']
for (var i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], f)
}
// necessary becasue we mutated source.data in-place
source.change.emit();
""")
slider.js_on_change('value', update_curve)
output_notebook()
show(column(slider, plot))
②使用 bokeh serve 启动 Bokeh 服务器并使用 .on_change（或对于某些小部件，.on_click）设置事件处理程序。事件处理程序是用户可以附加到组件的 Python 函数。 然后，当组件上的某些属性发生更改时，将调用这些函数。 这些处理程序应具有函数（attr，old，new），其中 attr 表示更改后的属性名称，而 old 和 new 则表示属性的先前值和更新值。
import numpy as np
from bokeh.io import output_notebook, show, curdoc
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, Slider
from bokeh.layouts import column
N = 100
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data={'x': x, 'y': y})
plot = figure()
plot.line('x', 'y', source=source)
slider = Slider(start=1, end=10, value=1, step=1, title='scale')
# 定义一个回调函数: callback
def callback(attr, old, new):
# 读取当前滑块值: scale
scale = slider.value
# 使用 np.sin(scale/x) 计算新的 y 值: new_y
new_y = np.sin(scale/x)
# 使用新值更新数据
source.data = {'x': x, 'y': new_y}
# 将回调附加到滑块的 'value' 属性
slider.on_change('value', callback)
# 创建布局并添加到当前文件
layout = column(slider, plot)
curdoc().add_root(layout)
三、下拉菜单选项更新绘图
from bokeh.io import output_notebook, show, curdoc
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, Select
from bokeh.layouts import row
import pandas as pd
data = pd.read_excel('./test.xls', skiprows=7, nrows=162)
# 创建数据源: source
source = ColumnDataSource(data={
'x': data['fertility'],
'y': data['female literacy']
})
# 画图: plot
plot = figure()
plot.circle('x', 'y', source=source)
# 定义一个回调函数: update_plot
def update_plot(attr, old, new):
# 如果新选择是 'female_literacy', 更新 'y' 为 female_literacy
if new == 'female literacy':
source.data = {
'x': data['fertility'],
'y': data['female literacy']
}
# 否则, 更新 'y' 为 population
else:
source.data = {
'x': data['fertility'],
'y': data['population']
}
# 创建下拉小部件: select
select = Select(title="distribution", options=["female literacy", "population"], value='female literacy')
# 将 update_plot 回调附加到 select 的 'value' 属性
select.on_change('value', update_plot)
# 创建布局并添加到当前文档
layout = row(select, plot)
curdoc().add_root(layout)
from bokeh.models import Select
from bokeh.layouts import column
from bokeh.io import curdoc
# 创建两个下拉选择小部件: select1, select2
select1 = Select(title='First', options=['A', 'B'], value='A')
select2 = Select(title='Second', options=['1', '2', '3'], value='1')
# 定义一个回调函数: callback
def callback(attr, old, new):
# 如果 select1 的值 是 'A'
if select1.value == 'A':
# 将 select2 选项设置为 ['1', '2', '3']
select2.options = ['1', '2', '3']
# 将 select2 值设置为 '1'
select2.value = '1'
else:
# 将 select2 选项设置为 ['100', '200', '300']
select2.options = ['100', '200', '300']
# 将 select2 值设置为 '100'
select2.value = '100'
# 将回调附加在 select1 的 'value' 属性
select1.on_change('value', callback)
# 创建布局并添加到当前文档
layout = column(select1, select2)
curdoc().add_root(layout)
四、按钮进行联动
from bokeh.models import Button, ColumnDataSource
from bokeh.layouts import column
from bokeh.plotting import figure
from bokeh.io import curdoc
import numpy as np
N = 100
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data={'x': x, 'y': y})
# 创建一个带有标签 'Update Data' 的按钮
button = Button(label='Update Data')
plot = figure()
plot.line('x', 'y', source=source)
# 定义不带参数的更新回调: update
def update():
# 计算新 y 值: y
y = np.sin(x) + np.random.random(N)
# 更新 ColumnDataSource
source.data = {'x': x, 'y': y}
# 将更新回调添加到按钮
button.on_click(update)
# 创建布局并添加到当前文档
layout = column(button, plot)
curdoc().add_root(layout)
# 从 bokeh.models 中导入 CheckboxGroup, RadioGroup, Toggle
from bokeh.models import CheckboxGroup, RadioGroup, Toggle
from bokeh.layouts import column
from bokeh.io import curdoc
# 添加一个切换: toggle
toggle = Toggle(label='Toggle button', button_type='success')
# 添加一个多选框: checkbox
checkbox = CheckboxGroup(labels=['Option 1', 'Option 2', 'Option 3'])
# 添加一个单选按钮: radio
radio = RadioGroup(labels=['Option 1', 'Option 2', 'Option 3'])
# 添加到当前文档
curdoc().add_root(column(toggle, checkbox, radio))
希望本文的内容对大家的学习或者工作能带来一定的帮助，每天进步一点点，加油。
网友评论