如何添加分层复选框

Question

我尝试修改下面的代码，以设置一个“曲线”复选框，该复选框将停用/激活所有子项（实际上，我需要的代码将处理其中很多，这只是一个示例）：

当前代码给出：

我需要实现这一目标：

import numpy as np
from bokeh.layouts import column, row
from bokeh.models import CustomJS, Slider, CheckboxGroup
from bokeh.plotting import ColumnDataSource, figure, show

# output_notebook()

# initial input data
x = np.linspace(0, 10, 500)
y = np.sin(x)
z = np.cos(x)
name_lst = ['sin', 'cos']

# dataframe
source = ColumnDataSource(data=dict(x=x, y=y, z=z))

# initialize figure
fig = figure(width=200, height=200)
line_renderer = [
    fig.line('x', 'y', source=source, name=name_lst[0]),
    fig.line('x', 'z', source=source, name=name_lst[1])
]
line_renderer[0].visible = False
#  a couple of check boxes

checkbox = CheckboxGroup(
    labels=name_lst, 
    active=[1, 1], 
    width=100
)

callback = CustomJS(args=dict(lines=line_renderer, checkbox=checkbox),
                    code="""
    lines[0].visible = checkbox.active.includes(0);
    lines[1].visible = checkbox.active.includes(1);
""")

# changes upon clicking and sliding
checkbox.js_on_change('active', callback)

layout = row(fig, column( checkbox))
show(layout)

Answer 1

首先，将“曲线”添加到

name_lst

。

name_lst = ['curves', 'sin', 'cos']

我们还更改了

line_renderer

、

checkbox

。

line_renderer = [
    fig.line('x', 'y', source=source, name=name_lst[1]),
    fig.line('x', 'z', source=source, name=name_lst[2])
]
line_renderer[0].visible = False
#  a couple of check boxes

checkbox = CheckboxGroup(
    labels=name_lst, 
    active=[2, 2, 2], // the cosine checkbox is now in the index 2
    width=100
)

现在，我们将在选中

curves

或特定复选框时显示曲线。
为此，我们更改 JS 代码。

callback = CustomJS(args=dict(lines=line_renderer, checkbox=checkbox),
                    code="""
    lines[0].visible = checkbox.active.includes(0) || checkbox.active.includes(1);
    lines[1].visible = checkbox.active.includes(0) || checkbox.active.includes(2);
""")