Python Bokeh中用复选框与CustomJS批量实现多条曲线显隐的代码优化方法

完整实现代码 #

# 1. 构造复选框，可批量生成标签适配任意曲线数量
checkbox_labels = [f'toto{i}' for i in range(20)]
# 注意：原代码中active参数取值错误，该参数接收初始选中的索引列表，示例为初始全选20条曲线
checkbox = CheckboxGroup(labels=checkbox_labels, active=list(range(20)), width=100)

# 2. 优化后的CustomJS回调，无需逐一声明曲线参数
callback = CustomJS(
    args=dict(line_list=df, checkbox=checkbox),
    code="""
    // 将选中索引转为Set提升查询效率
    const activeSet = new Set(checkbox.active);
    // 遍历所有曲线批量设置显隐
    line_list.forEach((line, index) => {
        line.visible = activeSet.has(index);
    });
    """
)

checkbox.js_on_change('active', callback)
layout = row(fig, checkbox)
show(layout)

优化点说明 #

• Python端：不再逐一声明l0到l19的参数，直接将存储所有曲线的列表df整体传入回调上下文，复选框标签也可通过列表推导式批量生成，后续如果增减曲线数量无需修改核心逻辑
• JavaScript端：通过循环遍历所有曲线完成显隐设置，无需写20行重复的判断代码，逻辑可复用性更强

内容的提问来源于stack exchange，提问作者olivier dadoun