基于labview的控件句柄_Bokeh开发基于Js的独立App

上一篇讲过如何基于Bokeh创建交互性Server App：

了凡春秋：基于Bokeh的交互性Server App​zhuanlan.zhihu.com

Server App有个问题就是程序运行时要保持bokeh server的存在，就是Python代码一直运行在后台。能不能创建独立的交互性App呢？答案是肯定的，方法是借助CustomJS，其本质是将交互性操作使用js代码实现，从而脱离Python的束缚。

想象一下，你用Bokeh开发了一个交互式网页App，将生成的html发给别人，他就可以在自己电脑上独立运行，而不需要安装Python、Bokeh，完美！

下面简单介绍一下Bokeh CustomJS的使用方法。

简单示例

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

# 构造数据
x = [x*0.005 for x in range(0, 200)]
y = x
source = ColumnDataSource(data=dict(x=x, y=y))

# 绘图
plot = Figure()
plot.line('x', 'y', source=source)

# 添加控件
jscode = """
    var data = source.data;
    var f = cb_obj.value
    var x = data['x']
    var y = data['y']
    for (var i = 0; i < x.length; i++) {
        y[i] = Math.pow(x[i], f)
    }
    source.change.emit();
"""
callback = CustomJS(args=dict(source=source), code=jscode)
slider = Slider(start=0.1, end=4, value=1, step=.1, title="阶次")
slider.js_on_change('value', callback)
layout = column(slider, plot)

# 保存和显示
output_file("js_on_change.html")
show(layout)

代码说明：

• 通过js_on_change设置CustomJS类型的回调函数，实现将js代码注入html；
• 驱动数据通过args注入，js中直接使用source访问数据；
• cb_obj为触发响应的控件句柄，已隐式注入js，在js中直接使用。

运行程序，生成js_on_change.html，发给任何人都可以独立使用，而不依赖Python和Bokeh。

去除Js编程

如果你不想编Js代码，可以用Python实现，然后让Bokeh用PScript将Python代码转为Js。这种方式只能在Bokeh2.0之前使用，2.0以后会去掉这种方式，因为官方推荐用Js。

另外PScript是Flexx的一个模块，Flexx是用于创建图形用户界面（GUI）的纯Python工具箱，基于Web技术进行渲染，所以能创建桌面应用程序和web应用程序，同时可以将程序导出到独立的HTML文档中。Flexx貌似和Bokeh达到的效果一样，不过比较小众。

from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

# 构造数据
x = [x*0.005 for x in range(0, 200)]
y = x
source = ColumnDataSource(data=dict(x=x, y=y))

# 绘图
plot = Figure()
plot.line('x', 'y', source=source)

# 添加控件
def callback(source=source, window=None):
    data = source.data
    f = cb_obj.value
    x, y = data['x'], data['y']
    for i in range(len(x)):
        y[i] = window.Math.pow(x[i], f)
    source.change.emit()
slider = Slider(start=0.1, end=4, value=1, step=.1, title="阶次",
                callback=CustomJS.from_py_func(callback))
layout = column(slider, plot)

# 保存和显示
output_file("js_on_change1.html")
show(layout)

使用前，需要安装pscript：

conda install -c conda-forge pscript

或

pip install pscript

上面代码的效果和简单示例效果一样。

更多用法

更多用法可以参考官方文档

JavaScript Callbacks​docs.bokeh.org

画框工具

在Js中响应各种用户交互事件

数据选择