散景删除网格图中元素之间的空间

时间:2019-03-04 16:28:55

标签: python css bokeh

我有一个Bokeh应用程序(bokeh==1.0.1),在其中我使用gridplot渲染滑块小部件框和一些图形。我正在使用sizing_mode='stretch_both'。如何消除小部件行与其他图形面板之间的空白?这是屏幕截图:

enter image description here

我为小部件创建一个布局:

blank_button = bkm.widgets.RadioButtonGroup()
blank_wb = widgetbox(blank_button, width=50, height=100, sizing_mode='fixed') # placeholder for space
date_slider_wb = widgetbox(date_slider, width=400, height=100, sizing_mode='fixed')
apply_button = bkm.widgets.Button(label="APPLY")
apply_wb = widgetbox(apply_button, width=100, height=100, sizing_mode='fixed')

hor_layout_date_slider = (
    row(
      column(blank_wb),
      column(date_slider_wb),
      column(apply_wb),
    )
)

然后我将hor_layout_date_slider包含在gridplot中:

grid = gridplot(
  children = [
    hor_layout_date_slider,
    airtemp_fig,
    windspeed_fig,
    winddir_fig,
    interval_fig,
    precip_fig,
    pressure_fig
    ],
    ncols=1,
    sizing_mode='stretch_both',
    merge_tools=False,
)

curdoc().add_root(grid)

我正在使用bokeh服务器并在html模板的单个div中将bokeh文档呈现为:

  <div class="placeholderbokehapp rounded" id="tbc-id">

<script src="http://localhost:5858/stormtracker_bokehapp/autoload.js?bokeh-autoload-element=1000&bokeh-app-path=/stormtracker_bokehapp&bokeh-absolute-url=http://localhost:5858/stormtracker_bokehapp&resources=none" id="1000"></script>
  </div>

作为一个尝试的黑客解决方案,我已经能够通过自定义的CSS规则来定义包含hor_layout_date_slider的div的高度,但是该元素仍然存在一个“占位符”(我不能具有检查元素的访问权限。)

我还尝试过使用仅包含滑块的简单小部件(未定义高度和宽度,并使用sizing_mode='stretch_both'),而不是上面定义的完整hor_layout_date_slider。但是,这会导致滑块元素后面出现相同的空白。

奇怪的是,sizing_mode='scale_width'不会发生此问题(滑块在布局中很紧)。

使用sizing_mode='stretch_both'时,我是否不知道要控制此布局中的Bokeh设置?

更新:

如果我分别将小部件和网格添加为:

curdoc().add_root(hor_layout_date_slider)
curdoc().add_root(grid)

该小部件随后呈现在第一个图形面板下方(您可以在下面的屏幕快照中看到部分滑动条)。

enter image description here

1 个答案:

答案 0 :(得分:1)

sizing_mode在网格或选项卡中嵌套列和行时效果不佳。只需将滑块移出网格并单独添加到根即可。

from bokeh.plotting import figure, curdoc
from bokeh.layouts import row, gridplot
from bokeh.models.widgets import Slider, RadioButtonGroup, Button

blank_button = RadioButtonGroup()
date_slider = Slider(start = 1, end = 10, value = 5)
apply_button = Button(label = "APPLY")

hor_layout_date_slider = row(blank_button, date_slider, apply_button)
airtemp_fig = figure()
windspeed_fig = figure()
grid = gridplot(children = [airtemp_fig, windspeed_fig],
                ncols = 1,
                sizing_mode = 'stretch_both',
                merge_tools = False)

curdoc().add_root(hor_layout_date_slider)
curdoc().add_root(grid)