javascript-使用Multiselect启用Bokeh中的行
作者：互联网
我在一些位置读出了记录仪的时间和湿度数据.为了探索数据并将其分发,我使用Python(通过jupyter笔记本)和Bokeh.
为了简化数据探索,我希望能够启用和禁用一些位置上带有时间和湿度数据的读出记录器.为了探索数据并将其分发,我使用Python(通过jupyter笔记本)和Bokeh.
为了简化数据探索,我希望能够启用和禁用位置图(以及将来的湿度和/或温度).为此,我想使用multiselect.
我到目前为止选择了基于this post的多行,但是当我尝试时,它将选择前n个位置,而不是我选择的位置.
进口
import numpy as np
import itertools
from collections import OrderedDict
from bokeh.io import push_notebook, show, output_notebook, output_file
from bokeh.layouts import row
from bokeh.palettes import Set1_6
from bokeh.plotting import figure as bf
from bokeh.models import MultiSelect, CustomJS, Range1d, LinearAxis, ColumnDataSource
from bokeh.resources import CDN
output_notebook()
辅助功能
一个函数生成示例数据
def generate_example_data(x, param=1):
t = 20 + param + np.sin(x * (1 + param))
rh = 50 + param + 10 * np.tan(x * (1 + param))
return {"x": x.copy(), "t": t, "rh": rh}
另一个函数生成javascript代码以使线可见或不可见.我尝试了几种方法,但是都没有给出正确的结果.我还添加了日志记录功能,以查看发生了什么以及触发了哪些if-else子句.
def generate_selector_code(locations):
for index, location in enumerate(locations):
res_str = """ if (%(index)i in multiselect.attributes.value) {
%(loc)s_t.visible = true;
%(loc)s_rh.visible = true;
console.log('enabling0 %(loc)s' );
} else {
%(loc)s_t.visible = false;
%(loc)s_rh.visible = false;
console.log('disabling0 %(loc)s' );
}
if ('%(index)i' in multiselect.attributes.value) {
%(loc)s_t.visible = true;
%(loc)s_rh.visible = true;
console.log('enabling1 %(loc)s' );
} else {
%(loc)s_t.visible = false;
%(loc)s_rh.visible = false;
console.log('disabling1 %(loc)s' );
}
if ('%(loc)s' in multiselect.attributes.value) {
%(loc)s_t.visible = true;
%(loc)s_rh.visible = true;
console.log('enabling2 %(loc)s' );
} else {
%(loc)s_t.visible = false;
%(loc)s_rh.visible = false;
console.log('disabling2 %(loc)s' );
}
"""%({"index": index, "loc": location})
# other method's I've tested but which result into an error which states that Object does not have an attribute includes
# if (multiselect.attributes.value.includes('%(index)i')) {
# %(loc)s_t.visible = true;
# %(loc)s_rh.visible = true;
# console.log('enabling3 %(loc)s' );
# } else {
# %(loc)s_t.visible = false;
# %(loc)s_rh.visible = false;
# console.log('disabling3 %(loc)s' );
# }
# if (multiselect.attributes.value.includes('%(loc)s')) {
# %(loc)s_t.visible = true;
# %(loc)s_rh.visible = true;
# console.log('enabling4 %(loc)s' );
# } else {
# %(loc)s_t.visible = false;
# %(loc)s_rh.visible = false;
# console.log('disabling4 %(loc)s' );
# }
yield res_str
设置情节
生成示例数据并选择要使用的工具
locations = ["loc_one", "loc_two", "loc_three"]
x = np.linspace(0, 4 * np.pi, 20)
data_per_loc = OrderedDict()
for i, loc in enumerate(locations):
data_per_loc[loc] = generate_example_data(x, i)
tools="pan,box_zoom,reset,resize,save,crosshair,hover,xbox_zoom, wheel_zoom"
生成图
进行实际绘图生成的函数.它创建实际的Bokeh图形并连接javascript代码以启用或禁用不同的行
def generate_plot(data_per_loc):
palet = itertools.cycle(Set1_6)
p = bf(title="test", plot_height=500, plot_width=1000, tools=tools, y_range=(17, 27),
toolbar_location="above")
p.xaxis.axis_label = "x"
p.yaxis.axis_label = "Temperature [°C]"
p.extra_y_ranges = {"humidity": Range1d(start=30, end=80)}
p.add_layout(LinearAxis(y_range_name="humidity", axis_label="Relative Humidity [%Rh]"), 'right')
plot_locations = OrderedDict()
for location, datadict in data_per_loc.items():
colour = next(palet)
source = ColumnDataSource(datadict)
t = p.line(x='x', y='t', color=colour, source=source, legend=location)
rh = p.line(x='x', y='rh', source=source, color=colour,
legend=location, y_range_name='humidity',
line_dash="dashed", )
plot_locations.update({location+"_t": t, location+"_rh": rh})
code = "console.log('value: ' + multiselect.attributes.value);\n " + "console.log('value_type: ' + Object.prototype.toString.call(multiselect.attributes.value).slice(8, -1));\n " + "console.log('options: ' + multiselect.attributes.options);\n " + "".join(generate_selector_code(data_per_loc.keys()))
return p, code, plot_locations
产生的代码如下所示：
"console.log('value: ' + multiselect.attributes.value);
console.log('value_type: ' + Object.prototype.toString.call(multiselect.attributes.value).slice(8, -1));
console.log('options: ' + multiselect.attributes.options);
if (0 in multiselect.attributes.value) {
loc_one_t.visible = true;
loc_one_rh.visible = true;
console.log('enabling0 loc_one' );
} else {
loc_one_t.visible = false;
loc_one_rh.visible = false;
console.log('disabling0 loc_one' );
}
if ('0' in multiselect.attributes.value) {
loc_one_t.visible = true;
loc_one_rh.visible = true;
console.log('enabling1 loc_one' );
} else {
loc_one_t.visible = false;
loc_one_rh.visible = false;
console.log('disabling1 loc_one' );
}
if ('loc_one' in multiselect.attributes.value) {
loc_one_t.visible = true;
loc_one_rh.visible = true;
console.log('enabling2 loc_one' );
} else {
loc_one_t.visible = false;
loc_one_rh.visible = false;
console.log('disabling2 loc_one' );
}
if (1 in multiselect.attributes.value) {
loc_two_t.visible = true;
loc_two_rh.visible = true;
console.log('enabling0 loc_two' );
} else {
loc_two_t.visible = false;
loc_two_rh.visible = false;
console.log('disabling0 loc_two' );
}
if ('1' in multiselect.attributes.value) {
loc_two_t.visible = true;
loc_two_rh.visible = true;
console.log('enabling1 loc_two' );
} else {
loc_two_t.visible = false;
loc_two_rh.visible = false;
console.log('disabling1 loc_two' );
}
if ('loc_two' in multiselect.attributes.value) {
loc_two_t.visible = true;
loc_two_rh.visible = true;
console.log('enabling2 loc_two' );
} else {
loc_two_t.visible = false;
loc_two_rh.visible = false;
console.log('disabling2 loc_two' );
}
if (2 in multiselect.attributes.value) {
loc_three_t.visible = true;
loc_three_rh.visible = true;
console.log('enabling0 loc_three' );
} else {
loc_three_t.visible = false;
loc_three_rh.visible = false;
console.log('disabling0 loc_three' );
}
if ('2' in multiselect.attributes.value) {
loc_three_t.visible = true;
loc_three_rh.visible = true;
console.log('enabling1 loc_three' );
} else {
loc_three_t.visible = false;
loc_three_rh.visible = false;
console.log('disabling1 loc_three' );
}
if ('loc_three' in multiselect.attributes.value) {
loc_three_t.visible = true;
loc_three_rh.visible = true;
console.log('enabling2 loc_three' );
} else {
loc_three_t.visible = false;
loc_three_rh.visible = false;
console.log('disabling2 loc_three' );
}
"
首次尝试将其整合在一起
output_file("c:\html\multiselect_loc.html")
p, code, plot_locations = generate_plot(data_per_loc)
ms_options = locations
ms_value = locations
callback = CustomJS(code=code, args={})
multiselect = MultiSelect(title="Location:", options=ms_options, value=ms_value, callback=callback)
callback.args = dict(**plot_locations, multiselect=multiselect)
layout = row(p, multiselect)
show(layout)
第二次尝试将其整合在一起
我以为javascript的字符串作为值有问题,所以我尝试使用ints作为multiselect的值
output_file("c:\html\multiselect_val.html")
p, code, plot_locations = generate_plot(data_per_loc)
ms_options = [(str(i), v) for i , v in enumerate(locations)]
ms_value = [str(i) for i in range(len(locations))]
callback = CustomJS(code=code, args={})
multiselect = MultiSelect(title="Location:", options=ms_options value=ms_value, callback=callback)
callback.args = dict(**plot_locations, multiselect=multiselect)
layout = row(p, multiselect)
show(layout)
结果
散景画出的线条没有问题,但是选择的过程很奇怪.它没有显示我想要的位置,而是使用前两种选择方法给出了前n行,而使用第3种选择则没有给出.
javascript控制台返回如下内容：
value: loc_two
value_type: Array
options: loc_one,loc_two,loc_three
enabling0 loc_one
enabling1 loc_one
disabling2 loc_one
disabling0 loc_two
disabling1 loc_two
disabling2 loc_two
disabling0 loc_three
disabling1 loc_three
disabling2 loc_three
value: loc_two,loc_three
value_type: Array
options: loc_one,loc_two,loc_three
enabling0 loc_one
enabling1 loc_one
disabling2 loc_one
enabling0 loc_two
enabling1 loc_two
disabling2 loc_two
disabling0 loc_three
disabling1 loc_three
disabling2 loc_three
我已经在github repo my github repo和javascript控制台输出中添加了所有示例代码.所有这些都通过IE11(公司限制)进行了测试.
解决方法:
我找到了罪魁祸首,这确实是检查数组键(0到len-1)而不是值的事实
res_str = """\
if (multiselect.attributes.value.indexOf('%(loc)s')>-1) {
%(loc)s_t.visible = true;
%(loc)s_rh.visible = true;
console.log('enabling5 %(loc)s' );
} else {
%(loc)s_t.visible = false;
%(loc)s_rh.visible = false;
console.log('disabling5 %(loc)s' );
}
"""%({"index": index, "loc": location})
是def generate_selector_code(locations)中的正确测试：
查看the bokeh example中使用CustomJS.from_coffeescript()的代码并浏览CoffeeScript documentation时,我注意到了这一点
of => in
in => no JS equivalent
标签：javascript,python,bokeh,multi-select 来源： https://codeday.me/bug/20191010/1885286.html