javascript - Python Bokeh CustomJS RadioGroup

Question

我对 Python 和 Pandas 相当有经验，但对 Bokeh 包非常陌生，并且在过去的几天里一直在努力完成这项任务，但没有取得任何进展。我正在构建一个仪表板来显示数据，使用单选按钮来选择/显示同一绘图上的不同线条将非常有帮助。我一直在遵循这里的示例( https://github.com/bokeh/bokeh/issues/3715 )，我可以使用复选框正常工作。我已将第 21 行中的“CheckboxGroup”以及“active”参数更改为“RadioGroup”。结果是，当我更改单选按钮的选择时，两条绘制的线都消失了，并且再也没有回来。我不明白为什么 CheckboxGroup 起作用而 RadioGroup 不起作用，考虑到它们非常相似并且它们都使用“active”事件进行回调。有人可以指出我的错误吗？

import numpy as np

from bokeh.io import show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import CheckboxGroup, RadioGroup
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.layouts import column, row
from bokeh.plotting import figure

t = np.arange(0.0, 2.0, 0.01)
s = np.sin(3*np.pi*t)
c = np.cos(3*np.pi*t)

source = ColumnDataSource(data=dict(t=t, s=s, c=c))

plot = figure(plot_width=400, plot_height=400)
a = plot.line('t', 's', source=source, line_width=3, line_alpha=0.6, 
line_color='blue')
b = plot.line('t', 'c', source=source, line_width=3, line_alpha=0.6,
line_color='red')

checkbox = RadioGroup(labels=["Cosinus", "Sinus"], active=0)

checkbox.callback = CustomJS(args=dict(line0=a, line1=b), code="""   
    //console.log(cb_obj.active);
    line0.visible = false;
    line1.visible = false;
    for (i in cb_obj.active) {
        //console.log(cb_obj.active[i]);
        if (cb_obj.active[i] == 0) {
            line0.visible = true;
        } else if (cb_obj.active[i] == 1) {
            line1.visible = true;
        }
    }
""")

layout = row(plot, widgetbox(checkbox))

show(layout)

Answer 1

在 radioboxgroup 中，一次只能有一个事件值，因此当您尝试循环整数时，for 循环是无用的。这是更正后的代码

checkbox.callback = CustomJS(args=dict(line0=a, line1=b), code="""   
    line0.visible = false;
    line1.visible = false;

    if (cb_obj.active == 0) {
        line0.visible = true;
    } else if (cb_obj.active == 1) {
        line1.visible = true;
    }
""")

有一个更好的方法来做到这一点，如果你有很多行，你可以在循环中使用“标签”列表的长度

line_list = [line0,line1];

lab_len=cb_obj.labels.length;

for (i=0;i<lab_len;i++) {
if (cb_obj.active == i) {
line_list[i].visible = true;
} else {
line_list[i].visible = false;
}
}

在复选框组中，“事件”属性是索引列表。您只需更改 if 条件即可使代码正常工作:

checkbox = CheckboxGroup(labels=["Cosinus", "Sinus"], active=[0,1])

checkbox.callback = CustomJS(args=dict(line0=a, line1=b), code="""   
    line_list = [line0,line1];

    lab_len=cb_obj.labels.length;

    for (i=0;i<lab_len;i++) {
    if (cb_obj.active.includes(i)) {
    line_list[i].visible = true;
    } else {
    line_list[i].visible = false;
    }
    }
""")