如何在Bokeh绘图中交互式地显示和隐藏线条？

Question

如何在Bokeh绘图中交互式地显示和隐藏线条？

19

能够交互式地显示和隐藏bokeh图中的线条将是很不错的。假设我已经创建了这样的一个图：

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)

如何添加交互式启用/禁用两行中的一行的可能性？

我知道这是心愿清单上的一个功能请求（请参见此功能请求），但这似乎不会很快得到实现。

我有印象使用CheckBoxGroup和自定义回调应该可以实现，但不幸的是，这个回调必须用JavaScript编写，而我完全没有经验。

- Eike P.

3个回答

2

我可能错了，但是我认为似乎没有可用于各行的id，隐藏它们的一种方法是执行document.getElementById("idSelected").style.visibility = "hidden";

由于CheckBoxGroup没有可用的回调函数，所以我决定使用Select。我可以在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))

也许你可以在CustomJS中调整数据，根据所选内容将其全部设置为0。或者，如果您可以访问line_width属性并将其设置为0，那就基本上是所有想到的了。

- euri10

抱歉给你点踩，新的回答针对 0.12.1 版本反映了最新的信息和新特性，使其变得更加简单。 - bigreddot

0

fig.legend.click_policy="hide"

点击图例，隐藏或显示线条。

- BEJARK

你的回答可以通过提供更多的支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user2561747 · Accepted Answer

编辑: 交互式图例现在已经内置于Bokeh 0.12.5库中，请查看https://bokeh.github.io/blog/2017/4/5/release-0-12-5/

这似乎有望作为交互式图例在某个时刻实现: https://github.com/bokeh/bokeh/issues/3715

目前版本(v0.12.1)的示例使用CustomJS复选框来实现此功能: https://github.com/bokeh/bokeh/pull/4868

相关代码:

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)