我有这些Python代码
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.models import layouts, CustomJS, Select
bokeh_tools = "pan,wheel_zoom"
plot_1 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_1")
plot_1.line(x_values, y_values)
plot_2 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_2")
plot_2.line(x_values_other, y_values_other)
plot_3 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_3")
plot_3.line(x_values, y_values)
select = Select(title="SELECT", options=["val1", "val2"])
column = layouts.Column(plot_1, select, plot_2)
select.callback = CustomJS(args={"column": column,
"plot_1": plot_1,
"plot_2": plot_2,
"plot_3": plot_3}, code="""
if(cb_obj.value === "val1"){
Bokeh.index[column.id].child_views[plot_2.id].remove(); // remove plot_2 from html
//what i must to do to add generated on python side plot_3 and show it
}else if(cb_obj.value === "val2"){
// some code here
}""")
script, div = components(column)
然后我将这个 div 和脚本插入 html 中并显示在某个页面上。 在页面上将看到“plot_1”、“plot_2”和“select”是下拉列表。 这些图具有许多线的不同值。 我想单击选定的下拉列表,然后更改plot_3 上的plot_2。
我必须通过单击下拉菜单来在 html 文档中渲染plot_3? 或者通过单击客户端 html 来更改重新渲染图的任何其他方法?
最佳答案
您不需要创建第三个图,尤其是因为 plot_2
和 plot_3
似乎都是 x 轴上带有日期时间的线图。您可以继续根据下拉菜单中的选择更改 plot_2
中的数据。
实现此目的的一种方法是使用 Bokeh 的 ColumnDataSource
(另请参阅 https://docs.bokeh.org/en/latest/docs/reference/models/sources.html 和 https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#javascript-callbacks )。您可以创建其中两个:一个包含 plot_2
的数据,另一个包含当前应该显示在 plot_3
中的数据。然后,在回调中,只需更改行的源,这是第三个类似容器的 ColumnDataSource。确保所有 ColumnDataSource 的列共享相同的名称。
这是一个基于您的代码的示例:
plot_2s = ColumnDataSource(data=dict(x=[1, 2, 3], y=[1, 2, 3]))
plot_3s = ColumnDataSource(data=dict(x=[3, 4, 5], y=[1, 2, 3]))
line_source = ColumnDataSource(data=dict(x=[1, 2, 3], y=[1, 2, 3]))
plot_1 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_1")
plot_1.line(x_values, y_values)
plot_2 = figure(x_axis_type="datetime", plot_width=800, tools=bokeh_tools, title="plot_2")
plot_2.line(x='x', y='y', source=line_source)
select = Select(title="SELECT", options=["val1", "val2"])
column = layouts.Column(plot_1, select, plot_2)
select.callback = CustomJS(args={"cds2": plot_2s, "cds3": plot_3s, "ls": line_source}, code="""
if(cb_obj.value === "val1"){
ls.data = cds2.data;
}else if(cb_obj.value === "val2"){
ls.data = cds3.data;
}
ls.change.emit();
""")
关于javascript - Bokeh js 通过单击将一个图更改或重新渲染为另一个图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48912993/