在Python Bokeh中使用CustomJS隐藏多行-前端问题

Hide several lines using CustomJS in Python Bokeh(在Python Bokeh中使用CustomJS隐藏多行)

本文介绍了在Python Bokeh中使用CustomJS隐藏多行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

假设我有两行不同的行：

df[0]=fig.line(x = 'x', y = 'y',..., name = 'toto0',source=s0)
df[1]=fig.line(x = 'x', y = 'y',..., name = 'toto1',source=s1)

如果我想要尽可能地隐藏它们，我使用这段代码：

checkbox = CheckboxGroup(labels=['toto0','toto1'], active=2, width=100)
callback = CustomJS(args=dict(l0=df[0],l1=df[1],checkbox=checkbox),
code="""
l0.visible = 0 in checkbox.active;
l1.visible = 1 in checkbox.active;
""")
checkbox.js_on_change('active', callback)
layout = row(fig,checkbox)
show(layout)

现在假设我有20行不同的行。如何继续压缩下面的代码？

callback = CustomJS(args=dict(l0=df[0],...,l19=df[19],checkbox=checkbox),
code="""
l0.visible = 0 in checkbox.active;
l1.visible = 1 in checkbox.active;
...
l19.visible = 19 in checkbox.active;
""")

这是一个Python和一个JavaScript问题...谢谢！

推荐答案

主要思想是收集列表中的所有linerendere，并将该列表传递给CustomJS。在那里，您可以再次循环此列表并应用您的更改。

最小示例

import pandas as pd
from bokeh.plotting import figure, show, output_notebook
from bokeh.models import CheckboxGroup, CustomJS
from bokeh.layouts import row
output_notebook()

df = pd.DataFrame(
    {'x':range(5), 
     'red':range(5), 
     'blue':list(range(5))[::-1], 
     'green':[2]*5}
)

fig = figure(width=300, height=300)

line_renderer = []
names = list(df.columns[1:])
for name in names:
    line_renderer.append(
        fig.line(
            x = 'x', 
            y = name, 
            color=name,
            name =name, 
            source=df
        )
    )

checkbox = CheckboxGroup(labels=names, active=list(range(len(names))), width=100)
callback = CustomJS(args=dict(lines=line_renderer,checkbox=checkbox),
    code="""
    for(var i=0; i<lines.length; i++){
        lines[i].visible = checkbox.active.includes(i);
    }
    """
)
checkbox.js_on_change('active', callback)
layout = row(fig,checkbox)
show(layout)

输出

这篇关于在Python Bokeh中使用CustomJS隐藏多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！