[英]How to interactively display and hide lines in a Bokeh plot?
It would be nice to be able to interactively display and hide lines in a bokeh plot. 能够以交互方式显示和隐藏散景图中的线条会很不错。 Say, I have created my plot something like this:
说,我创建了这样的情节:
from bokeh.plotting import output_file, figure, show
from numpy.random import normal, uniform
meas_data_1 = normal(0, 1, 100)
meas_data_2 = uniform(-0.5, 0.5, 100)
output_file("myplot.html", title="My plot")
fig = figure(width=500, plot_height=500)
fig.line(x=range(0, len(meas_data_1)), y=meas_data_1)
fig.line(x=range(0, len(meas_data_2)), y=meas_data_2)
show(fig)
How can I add the possibility to interactively enable/disable one of the two lines? 如何添加以交互方式启用/禁用两条线之一的可能性?
I know that this is on the wish list (see this feature request ), but that doesn't sound like it would be implemented too soon. 我知道这是在愿望清单上(请参阅此功能请求 ),但这听起来不会太快实施。
I have the impression that this should be possible using a CheckBoxGroup and a self-defined callback , but unfortunately this callback has to be written in JavaScript, which I have absolutely no experience in. 我的印象是使用CheckBoxGroup和自定义的回调应该是可能的,但不幸的是这个回调必须用JavaScript编写,我完全没有经验。
EDIT : Interactive legends are now built into the library as of Bokeh 0.12.5
, see https://bokeh.github.io/blog/2017/4/5/release-0-12-5/ 编辑 :从Bokeh
0.12.5
,交互式图例现已内置到库中,请参阅https://bokeh.github.io/blog/2017/4/5/release-0-12-5/
This appears on track to be implemented at some point as interactive legends: https://github.com/bokeh/bokeh/issues/3715 这似乎有望在某些时候作为交互式传说实现: https : //github.com/bokeh/bokeh/issues/3715
Currently (v0.12.1), there is an example that uses CustomJS on checkboxes to achieve this: https://github.com/bokeh/bokeh/pull/4868 目前(v0.12.1),有一个例子在复选框上使用CustomJS来实现这个目的: https : //github.com/bokeh/bokeh/pull/4868
Relevant code: 相关代码:
import numpy as np
from bokeh.io import output_file, show
from bokeh.layouts import row
from bokeh.palettes import Viridis3
from bokeh.plotting import figure
from bokeh.models import CheckboxGroup, CustomJS
output_file("line_on_off.html", title="line_on_off.py example")
p = figure()
props = dict(line_width=4, line_alpha=0.7)
x = np.linspace(0, 4 * np.pi, 100)
l0 = p.line(x, np.sin(x), color=Viridis3[0], legend="Line 0", **props)
l1 = p.line(x, 4 * np.cos(x), color=Viridis3[1], legend="Line 1", **props)
l2 = p.line(x, np.tan(x), color=Viridis3[2], legend="Line 2", **props)
checkbox = CheckboxGroup(labels=["Line 0", "Line 1", "Line 2"],
active=[0, 1, 2], width=100)
checkbox.callback = CustomJS(args=dict(l0=l0, l1=l1, l2=l2, checkbox=checkbox),
lang="coffeescript", code="""
l0.visible = 0 in checkbox.active;
l1.visible = 1 in checkbox.active;
l2.visible = 2 in checkbox.active;
""")
layout = row(checkbox, p)
show(layout)
I may be wrong, but it seems to me that there is no id available for the various lines, one way of hiding them would have been to do a document.getElementById("idSelected").style.visibility = "hidden";
我可能错了,但在我看来,各种行没有可用的id,隐藏它们的一种方法就是做一个
document.getElementById("idSelected").style.visibility = "hidden";
since CheckBoxGroup
doesn't have a callback available I decided to use a Select
. 由于
CheckBoxGroup
没有可用的回调,我决定使用Select
。 I can get the selected source in the CustomJS
, but that's pretty much all : 我可以在
CustomJS
获取所选源代码,但这几乎是全部:
from bokeh.io import vform
from bokeh.models import CustomJS, ColumnDataSource, Select
from bokeh.plotting import output_file, figure, show
from numpy.random import normal, uniform
meas_data_1 = normal(0, 1, 10)
meas_data_2 = uniform(-0.5, 0.5, 10)
x1 = range(0, len(meas_data_1))
y1 = meas_data_1
source1 = ColumnDataSource(data=dict(x=x1, y=y1))
x2 = range(0, len(meas_data_2))
y2 = meas_data_2
source2 = ColumnDataSource(data=dict(x=x2, y=y2))
output_file("myplot.html", title="My plot")
fig = figure(width=500, plot_height=500)
fig.line('x', 'y', source=source1, line_width=3, line_alpha=0.6)
fig.line('x', 'y', source=source2, line_width=3, line_alpha=0.6)
select = Select(title="Option:", options=["source1", "source2"])
select.callback = CustomJS(args=dict(source1=source1, source2=source2, select=select), code="""
console.log(select.attributes.value);
""")
show(vform(fig, select))
Maybe you can "tweak" the data in the CustomJS
making it all 0 depending on what is selected, or maybe if you can access the line_width property and make it 0, but that's pretty much all I can think of. 也许您可以“调整”
CustomJS
的数据,使其全部为0,具体取决于所选内容,或者如果您可以访问line_width属性并使其为0,但这几乎是我能想到的全部内容。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.