Python/Bokeh-如何通过使用Select、Callback和CustomJS/js_on_change从dict中按列值筛选行来更改数据源
问题应该出在回调函数中。不幸的是,我在JS没有经验。我从dataframe-js库中获取了这一部分,但它不起作用。我们的想法是有一个仪表板,其中包含Rate1和Rate2的两个图表,以及这两个费率类别的下拉菜单。
import pandas as pd
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.plotting import figure, output_file
from bokeh.layouts import gridplot
from bokeh.io import show
d = {'Category': ['Cat1', 'Cat2', 'Cat3', 'Cat1', 'Cat2', 'Cat3', 'Cat1', 'Cat2', 'Cat3'],
'Rate1': [1, 4, 3, 3, 7, 4, 9, 2, 6], 'Rate2': [3, 4, 6, 1, 9, 6, 8, 2, 1],
'Date': ['2021-06-21', '2021-06-21', '2021-06-21', '2021-06-22', '2021-06-22', '2021-06-22', '2021-06-23', '2021-06-23', '2021-06-23']}
df = pd.DataFrame(data=d)
output_file("with_dropdown_list.html")
category_default = "Cat1"
unique_categories = list(df.Category.unique())
source = ColumnDataSource(data={'y1': df.loc[df['Category'] == category_default].Rate1,
'y2': df.loc[df['Category'] == category_default].Rate2,
'date': df.loc[df['Category'] == category_default].Date})
output_file("time_series.html")
s1 = figure(title=category_default, x_axis_type="datetime", plot_width=500, plot_height=500)
s1.line(y='y1', x='date', source=source)
s2 = figure(title=category_default, x_axis_type="datetime", plot_width=500, plot_height=500)
s2.line(y='y2', x='date', source=source)
callback1 = CustomJS(args = {'source': source, 'data': data},
code = """source.data['y1'] = data['y1'].filter(row => row.get('Category') == cb_obj.value);""")
callback2 = CustomJS(args = {'source': source, 'data': data},
code = """source.data['y2'] = data['y2'].filter(row => row.get('Category') == cb_obj.value);""")
select1 = Select(title='Category Selection', value=category_default, options=unique_categories)
select1.js_on_change('value', callback1)
select2 = Select(title='Category Selection', value=category_default, options=unique_categories)
select2.js_on_change('value', callback2)
p = gridplot([[s1, s2], [select1, select2]])
show(p)
解决方案
最快的方法可能是创建一个字典,将每个类别的值映射到适当的比率(比率1或比率2,具体取决于绘图)。为此,您可以创建一个宽的数据集,其中每行表示一个唯一的日期:
df = pd.DataFrame(data=d).astype({"Date": "datetime64[ns]"}).pivot("Date", "Category", ["Rate1", "Rate2"])
print(df)
Rate1 Rate2
Category Cat1 Cat2 Cat3 Cat1 Cat2 Cat3
Date
2021-06-21 1 4 3 3 4 6
2021-06-22 3 7 4 1 9 6
2021-06-23 9 2 6 8 2 1
现在数据已经设置好了,我们可以轻松地使用for循环来创建每个绘图,而不是手动指定两者(完整代码):
import pandas as pd
from bokeh.models import ColumnDataSource, CustomJS, Select
from bokeh.plotting import figure
from bokeh.layouts import gridplot
from bokeh.io import show
d = {
'Category': ['Cat1', 'Cat2', 'Cat3', 'Cat1', 'Cat2', 'Cat3', 'Cat1', 'Cat2', 'Cat3'],
'Rate1': [1, 4, 3, 3, 7, 4, 9, 2, 6], 'Rate2': [3, 4, 6, 1, 9, 6, 8, 2, 1],
'Date': ['2021-06-21', '2021-06-21', '2021-06-21', '2021-06-22', '2021-06-22', '2021-06-22', '2021-06-23', '2021-06-23', '2021-06-23']
}
df = pd.DataFrame(data=d).astype({"Date": "datetime64[ns]"}).pivot("Date", "Category", ["Rate1", "Rate2"])
category_default = "Cat1"
unique_categories = list(df.columns.levels[1])
plot_figures = []
selectors = []
for y_name in ["Rate1", "Rate2"]:
subset = df[y_name] # select the appropriate "Rate" subset
subset_data = subset.to_dict("list") # dictionary-format: {'Cat1': [values...], 'Cat2': [values...], 'Cat3': [values...]}
source = ColumnDataSource({
"date": subset.index, # subset.index are the dates
"rate": subset_data[category_default]
})
p = figure(title=y_name, x_axis_type="datetime", plot_width=500, plot_height=500)
p.line(y="rate", x='date', source=source)
select = Select(title='Category Selection', value=category_default, options=unique_categories)
callback = CustomJS(
args={"subset_data": subset_data, "source": source},
code="""
source.data['rate'] = subset_data[cb_obj.value];
source.change.emit();
""")
select.js_on_change("value", callback)
plot_figures.append(p)
selectors.append(select)
p = gridplot([plot_figures, selectors])
show(p)
默认渲染地块
将类别更新为Cat2&;Cat3
相关文章