Как добавить опорную кривую на график в зависимости от предыдущего выбора мультиселекции в Bokeh - PullRequest
Новая
       16

Как добавить опорную кривую на график в зависимости от предыдущего выбора мультиселекции в Bokeh

0 голосов
/ 24 июня 2019

Я новичок в Bokeh и пытаюсь реализовать виджет-флажок, который бы добавлял одну кривую привязки к графику в зависимости от предыдущего варианта выбора нескольких элементов пользователя.Например, если пользователь выбирает A в виджете множественного выбора, тогда кривая A будет отображаться при использовании виджета с флажком.Если пользователь выберет B в виджете множественного выбора, тогда кривая B появится, когда используется виджет флажка.Будет только один флажок под названием «Добавить эталонную кривую».Прямо сейчас виджет флажка не совсем работает, скорее всего, потому что мне трудно работать с CustomJS.Мой код ниже.Есть идеи? 

from bokeh.models import CustomJS, ColumnDataSource, MultiSelect, CheckboxGroup, Column

from bokeh.plotting import figure, show
import pandas as pd

data = dict(letter = ['A','A','B','C','B','B','A','C','C','B'],
x = [1, 2, 1, 2, 3, 2, 2, 3, 2, 3],
y = ['10','20','10','30','10','40','10','30','10','40'])
data = pd.DataFrame(data)

data_source = ColumnDataSource(data)
source = ColumnDataSource(dict(x = [], y = []))

plot = figure()
plot.circle('x', 'y', line_width = 2, source = source)

callback = CustomJS(args = {'source': source, 'data_source': data_source},
code = """
var data = data_source.data;
var s_data = source.data;
var letter = data['letter'];
var select_vals = cb_obj.value;
var x_data = data['x'];
var y_data = data['y'];
var x = s_data['x'];
x.length = 0;
var y = s_data['y'];
y.length = 0;
for (var i = 0; i < x_data.length; i++) {
    if (select_vals.indexOf(letter[i]) >= 0) {
        x.push(x_data[i]);
        y.push(y_data[i]);
        }
}
source.change.emit();
""")

multiselect = MultiSelect(title = 'Choose', value = [], options = ['A', 'B', 'C'])
multiselect.js_on_change('value', callback)


# Toggle reference curves on/off

## Dummy data for plotting lines testing
x = list(range(10))
A = [ a**1.5 for a in x]
B = [ a**1.6 for a in x]
C = [ a**1.7 for a in x]

curve_A = plot.line(x, A, color='red')
curve_B = plot.line(x, B, color='red')
curve_C = plot.line(x, C, color='red')

curve_A.visible = False
curve_B.visible = False
curve_C.visible = False

curve_checkbox = CheckboxGroup(labels=["Add reference curve",], active=[])
curve_checkbox.callback = CustomJS(args=dict(A=A, B=B, C=C, source=source, curve_checkbox=curve_checkbox),
                                     code="""
                                     curve_A.visible = 0 in checkbox.active;
                                     """)

layout = Column(multiselect, curve_checkbox, plot)
show(layout)

1 Ответ

0 голосов
/ 03 июля 2019

Попробуйте следующий код: 

curve_checkbox.callback = CustomJS(args=dict(curve_A=curve_A, 
                                             curve_B=curve_B, 
                                             curve_C=curve_C, 
                                             source=source, 
                                             checkbox=multiselect),
                                     code="""
    let checked = cb_obj.active.length > 0
    curve_A.visible = checkbox.value.indexOf("A") >= 0 && checked;
    curve_B.visible = checkbox.value.indexOf("B") >= 0 && checked;
    curve_C.visible = checkbox.value.indexOf("C") >= 0 && checked;
                                     """)
...