Bokeh js通过单击将一个图更改或重新渲染为另一个图

Question

我有这些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。

我必须通过单击下拉列表来 plot_3 在 html 文档中呈现什么？或者通过单击客户端 html ?

来更改重新渲染图的任何其他方式

Answer 1

您不需要创建第三个图，尤其是因为看起来 plot_2 和 plot_3 都是在 x-axis 上带有 date-times 的线图。您可以继续并根据您在 drop-down 菜单中的选择更改 plot_2 中的数据。

一种方法是使用 Bokeh 的 ColumnDataSource（另请参阅 https://docs.bokeh.org/en/latest/docs/reference/models/sources.html and https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#javascript-callbacks）。您可以创建其中两个：一个包含您的 plot_2 的数据，另一个包含当前应该显示在您的 plot_3 中的数据。然后，在您的回调中，只需更改行的来源，即第三个 container-like ColumnDataSource。确保所有 ColumnDataSources 的列共享相同的名称。

这是一个基于您的代码的示例：

    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();
         """)

Bokeh js通过单击将一个图更改或重新渲染为另一个图

Bokeh js change or rerender one plot to another plot by clicking

javascript

python

bokeh

bokehjs