Question

在散景中，当在显示空的可填充ColumnDataSource数据的绘图上使用时，重置工具不能直观地工作。它使用默认的宽度和高度覆盖绘图的宽度和高度。

在试图通过简单的按钮交互来解决它时，我被两个回调之间传输变量的明显必要性所阻挡。

在下面的代码中，该图显示“source1”中的内容，该内容在“radiogroup”回调期间填充了“source2”中的项目。

有没有办法在“callback2”中使用“callback”中声明的“var y”和“var x”？如果我将“source1”作为参数传递给“callback2”，它将无法工作，因为它将传递空源。

我还尝试将“button”作为参数传递给“回调”并在“回调”代码中写入按钮回调，但找不到使其工作的方法。

from bokeh.plotting import Figure
from bokeh.models import ColumnDataSource, CustomJS, RadioGroup, Button, VBox
from bokeh.layouts import gridplot
from bokeh.resources import CDN
from bokeh.embed import file_html

x0 = range(10)
x1 = range(100)
y0 = [i for i in x0]
y1 = [i*2 for i in x1][::-1]


fig=Figure(height=250,width=800)

source1=ColumnDataSource(data={"x":[],"y":[]})
source2=ColumnDataSource(data={"x0":x0,"x1":x1,"y0":y0,"y1":y1})

p = fig.line(x='x',y='y',source=source1)

callback=CustomJS(args=dict(s1=source1,s2=source2,px=fig.x_range,py=fig.y_range),  code="""
    var d1 = s1.get("data");
    var d2 = s2.get("data");
    var val = cb_obj.active;

    d1["y"] = [];
    d1["x"] = [];
    var y = d2["y"+val];
    var x = d2["x"+val];

    var min = Math.min( ...y );
    var max = Math.max( ...y );

    py.set("start",min);
    py.set("end",max);

    var min = Math.min( ...x );
    var max = Math.max( ...x );

    px.set("start",min);
    px.set("end",max);

    for(i=0;i<=y.length;i++){
        d1["y"].push(d2["y"+val][i]);
        d1["x"].push(d2["x"+val][i]);
    }

    s1.trigger("change");
    """)

callback2=CustomJS(args=dict(px=fig.x_range,py=fig.y_range), code="""   
    var min = Math.min( ...y );
    var max = Math.max( ...y );

    py.set("start",min);
    py.set("end",max);

    var min = Math.min( ...x );
    var max = Math.max( ...x );

    px.set("start",min);
    px.set("end",max);

    s1.trigger("click")
    """)


radiogroup = RadioGroup(labels=['First plot','Second plot'],active=0,callback=callback)
radiobox = VBox(radiogroup,width=100)
button = Button(label='Reset axes',button_type='success',callback=callback2)
buttonbox = VBox(button,width=100)

grid = gridplot([[radiobox,buttonbox],[fig]])

outfile=open('TEST.html','w')
outfile.write(file_html(grid,CDN,'Reset'))
outfile.close()

修改感觉有点傻，我发现解决方案如此之快，即使我在发布之前搜索并尝试了很长时间。但这是一个解决方法，我只需要将“radiogroup”作为参数传递给“callback2”以填充“var val”，然后重新填充“source1”。

callback=CustomJS(args=dict(s1=source1,s2=source2,px=fig.x_range,py=fig.y_range),  code="""
    var d1 = s1.get("data");
    var d2 = s2.get("data");
    var val = cb_obj.active;

    d1["y"] = [];
    d1["x"] = [];
    var y = d2["y"+val];
    var x = d2["x"+val];

    var min = Math.min( ...y );
    var max = Math.max( ...y );

    py.set("start",min);
    py.set("end",max);

    var min = Math.min( ...x );
    var max = Math.max( ...x );

    px.set("start",min);
    px.set("end",max);

    for(i=0;i<=y.length;i++){
        d1["y"].push(d2["y"+val][i]);
        d1["x"].push(d2["x"+val][i]);
    }

    s1.trigger("change");
    """)


radiogroup = RadioGroup(labels=['First plot','Second plot'],active=0,callback=callback)
radiobox = VBox(radiogroup,width=100)

callback2=CustomJS(args=dict(radiogroup=radiogroup,s1=source1,s2=source2,px=fig.x_range,py=fig.y_range), code="""   
    var d1 = s1.get("data");
    var d2 = s2.get("data");
    var val = radiogroup.active;

    d1["y"] = [];
    d1["x"] = [];
    var y = d2["y"+val];
    var x = d2["x"+val];

    var min = Math.min( ...y );
    var max = Math.max( ...y );

    py.set("start",min);
    py.set("end",max);

    var min = Math.min( ...x );
    var max = Math.max( ...x );

    px.set("start",min);
    px.set("end",max);

    for(i=0;i<=y.length;i++){
        d1["y"].push(d2["y"+val][i]);
        d1["x"].push(d2["x"+val][i]);
    }

    s1.trigger("click")
    """)

button = Button(label='Reset axes',button_type='success',callback=callback2)
buttonbox = VBox(button,width=100)

编辑2：重置实际上可以作为上面的“重置轴”按钮。重置工具会将图形大小重置为plot_width和plot_height，默认情况下为600。我使用width和height来声明我的数字，这就是为什么重置工具会重置为600x600的数字。

无论如何，在两个回调之间传递变量的问题仍然存在。如果我声明“var Z = 0;”在“回调”中有没有办法在“callback2”中使用Z？

Bokeh在两个回调之间共享变量

0 个答案: