我想在一个具有散景的图形中创建交互式绘图。以下代码适用于data_1,最后我得到了一个html文件:
data_1 = ColumnDataSource(data=user_id_weekly01)
data_2 = ColumnDataSource(data=user_id_weekly02)
output_file("test.html")
#generate info box with html
TOOLTIPS = """
<div style="background-color: #8b85af">
<div>
<span style="font-size: 17px; font-weight: bold; user_ID:">user_ID: @user_ID</span>
</div>
<div>
<span style="font-size: 17px; font-weight: bold; user_ID_count:">requested reports: @user_ID_count</span>
</div>
<div>
<span style="font-size: 17px; font-weight: bold; number_requested_plots:">requested plots: @number_requested_plots</span>
</div>
</div>
"""
p = figure(plot_width=1000, plot_height=500, tooltips=TOOLTIPS,
title="test")
p.vbar(source=data_1,x='user_ID',top='user_ID_count',bottom=0,width=1.0)
p.y_range.start = 0
p.xaxis.axis_label = "user_ID"
p.yaxis.axis_label = "number requested report"
p.outline_line_color = None
p.xaxis.axis_label_text_font_size = "13pt"
p.yaxis.axis_label_text_font_size = "13pt"
p.xaxis.major_label_text_font_size = "13pt"
p.yaxis.major_label_text_font_size = "13pt"
p.title.text_font_size = '13pt'
show(p)
现在,我不仅有data_1,而且还有data_2,依此类推。我想用散景的滑块构建一些东西,以便能够在不同的图上“滑动”。如果它不适用于滑块,则单击按钮也是一种明智的解决方案。
data_1 ect. looks like:
user_ID user_ID_count number_requested_plots
0 13 1 19
1 28 1 8
2 53 3 57
3 64 8 145
4 82 1 11
5 94 1 19
6 100 13 228
7 102 1 19
我期待一些提示,谢谢!
您可以使用CommonJS并在滑块值更改时编写回调(请参见bokeh docs)。例如:
data_1 = ColumnDataSource(data=user_id_weekly01)
data_2 = ColumnDataSource(data=user_id_weekly02)
# add default source variable:
source = ColumnDataSource(data=user_id_weekly01)
# ...
# and use it in your vbar:
p.vbar(source=source,x='user_ID',top='user_ID_count',bottom=0,width=1.0)
# ...
# replace show(plt) with the following code:
from bokeh.models import Slider, CustomJS
from bokeh.layouts import column
datasources = [data_1, data_2]
slider = Slider(start=0, end=len(datasources) -1, step=1, title="datasources", value=0)
callback = CustomJS(args=dict(source=source, datasources=datasources), code="""
var i = cb_obj.value;
source.data = Object.assign({},datasources[i].data);
source.change.emit();
""")
slider.js_on_change('value', callback)
show(column(p,slider))
这个想法是,在滑块值更改时,您用数据源列表中的源数据替换源数据。