bokeh responsive row with items of unequal width

帅比萌擦擦* 提交于 2019-12-02 05:29:39

问题


I'm trying to create a responsive row in bokeh 0.12.3 that contains a figure and a widgetbox, where the widgetbox has a much smaller width than the figure.

I'm able to achieve only the former with the following:

from bokeh.io import output_file, show
from bokeh.layouts import row, widgetbox
from bokeh.models.widgets import RadioButtonGroup, TextInput
from bokeh.plotting import figure

output_file("layout.html")

x = list(range(11))
y0 = x
y1 = [10 - i for i in x]
y2 = [abs(i - 5) for i in x]

# create a new plot
s1 = figure(width=600, plot_height=600, title=None)
s1.circle(x, y0, size=10, color="navy", alpha=0.5)

widgets = widgetbox([RadioButtonGroup(labels=["a", "b"]), TextInput(title="Input:", width=150)], width=150)

# put the results in a row
show(row([s1, widgets], responsive=True))

But this produces a responsive row where the width of the figure and widgetbox are equal. On tablets and mobile devices this can use up a lot of precious screen real-estate.

The docs on layouts specify that every item must have the same sizing mode, but not that every item must have the same size. I can't find any reference on setting relative sizes of each item.

I've played around with various options like sizing_mode, and setting widths at various levels, but I can't produce the desired behaviour.


回答1:


As of Bokeh 0.12.3 equal-sizes for children is the only available option for the built-in Bokeh layouts such as row, etc. However, you could possibly embed the different children into your own HTML template, using the bokeh.embed functions, which would give you finer control over things.

For instance, if you call:

components((s1, widgetbox))

Then you will get back a tuple:

(script, (s1_div, widgetbox_div)) 

You can template the <script> and the two <div>s into an HTML template. The components will show up wherever you insert the <div>s.



来源:https://stackoverflow.com/questions/40413198/bokeh-responsive-row-with-items-of-unequal-width

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!