使用散景下拉列表过滤数据框 Widget/CustomJS

Question

我必须制作一个独立的 html 仪表板，所以我想弄清楚如何使用 CustomJS 向散景下拉小部件添加回调。问题是，即使在查阅了有关该主题变体的其他帖子后，我仍然无法弄清楚。任何帮助，将不胜感激！最终，我会使用下拉列表来过滤堆积条形图，但我想在先过滤数据表之后尝试自己弄清楚。

我咨询过, , and , and . Additionally, I've been going through the docs at https://docs.bokeh.org/en/1.3.4/docs/user_guide/interaction/callbacks.html#userguide-interaction-jscallbacks,

import pandas as pd
from bokeh.models.widgets import Dropdown
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS
from bokeh.io import show, output_file, output_notebook, reset_output


raw_data = {'ORG': ['APPLE', 'ORANGE', 'MELON'],
            'APPROVED': [5, 10, 15],
            'CREATED': [1, 3, 5],
            'INPROCESS': [4,2,16]}

df = pd.DataFrame(raw_data)

# create list of orgs to use later
org_l = list(df['ORG'].unique())

# create CDS for source
src = ColumnDataSource(df)

# create cols
table_columns = [TableColumn(field = Ci, title = Ci) for Ci in df.columns] 


# create filtered table
filtered_df = df.loc[df['ORG']=='f']

# create CDS for filtered source
new_src = ColumnDataSource(filtered_df)

# create dropdown
dropdown = Dropdown(label="Dropdown button", button_type="warning", menu = org_l)

callback_code = """"
                var data = src.data;
                var new_data = new_src.data;
                var f = cb_obj.value;
                var list = org_l;
                if var i = org_list[i] {
                new_src.data = src.data
                }

              """

callback=CustomJS(args=dict(dropdown = dropdown,source=src),
             code=callback_code)

# create table
member_table = DataTable(source = new_src, columns = table_columns)

dropdown.js_on_change('value', callback)

show(widgetbox(dropdown, member_table))

''''

Answer 1

在 JS 代码中唯一可作为命名变量访问的 Bokeh 对象是那些明确包含在 args 字典中的对象。这就是 args 字典的目的，自动使 Python Bokeh 对象的 JavaScript 对应物易于访问。浏览器对 Python 或脚本中的 Python 变量一无所知。您在 JS 代码中引用了 src、new_src，但没有在 args 字典中传递任何这些。此外，普通的 Python 值 org_l 需要按字面意思包含在 JS 代码文本中，使用字符串文本格式，例如使用 % 运算符。

您的 JS 代码也存在语法错误，浏览器的 JS 控制台会报告该错误（您应该熟悉它，因为它是调试这些问题的最佳工具）。这不是有效的 JS 代码：

if var i = org_list[i] {
    new_src.data = src.data
}

Answer 2

好的，经过大量的试验和错误以及来自 bigreddot 的指示，我得到了下面的工作。

import pandas as pd
from bokeh.models.widgets import Select
from bokeh.layouts import widgetbox
from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS
from bokeh.io import show, output_file, output_notebook, reset_output
from bokeh.layouts import row, column, layout


raw_data = {'ORG': ['APPLE', 'ORANGE', 'MELON'],
        'APPROVED': [5, 10, 15],
        'CREATED': [1, 3, 5],
        'INPROCESS': [4,2,16]}

df = pd.DataFrame(raw_data)

# create CDS for source
src1 = ColumnDataSource(df)

# create cols
table_columns1 = [TableColumn(field = Ci, title = Ci) for Ci in df.columns]

# original data table
data_table1 = DataTable(source=src1, 
                   columns=table_columns, width=400, height=280)

# create empty dataframe to hold variables based on selected ORG value
df2 = pd.DataFrame({'status':['APPROVED', 'CREATED', 'INPROCESS'],
               'count':[float('nan'), float('nan'), float('nan')]})

# create CDS for empty dataframe
src2 = ColumnDataSource(df2)

# create cols
table_columns2 = [TableColumn(field = Ci, title = Ci) for Ci in    df2.columns] 

callback = CustomJS(args=dict(src1=src1, src2=src2), code='''
var count = ['APPROVED', 'CREATED', 'INPROCESS'];
if (cb_obj.value != 'Please choose...') {
    var org = src1.data['ORG'];
    var ind = org.indexOf(cb_obj.value);
    for (var i = 0; i < count.length; i++) {
        src2.data['count'][i] = src1.data[count[i]][ind];
    }
}
else {
    for (var i = 0; i < status.length; i++) {
        src2.data['status'][i] = undefined;
    }

}
src2.change.emit();
''')

options = ['Please choose...'] + list(src1.data['ORG'])
select = Select(title='Test', value=options[0], options=options)
select.js_on_change('value', callback2)

show(column(select, data_table2))

使用散景下拉列表过滤数据框 Widget/CustomJS

Filter Dataframe Using Bokeh Dropdown Widget/CustomJS

pandas

bokeh

bokehjs