【导语】通过前两节基础的学习，本篇文章我们将会进阶学习 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

自动跳到浏览器，可以点击 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))

希望本文的内容对大家的学习或者工作能带来一定的帮助，每天进步一点点，加油。