散景删除gridplot中元素之间的空间

问题描述 投票:0回答:1

我有一个Bokeh应用程序(bokeh==1.0.1),我使用gridplot渲染一个滑块widgetbox和几个数字。我正在使用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)

我正在使用散景服务器并在我的html模板中的一个div中渲染散景文档:

  <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的高度,但是仍然存在一个持久存在的“占位符”(我无法使用inspect元素访问)。

我也试过使用一个只包含滑块的简单widgetbox(没有定义高度和宽度并使用sizing_mode='stretch_both'),而不是如上定义的完整hor_layout_date_slider。然而,这导致滑块元件之后的相同空白区域。

奇怪的是,sizing_mode='scale_width'不会出现这个问题(滑块在布局上很紧)。

使用sizing_mode='stretch_both'时是否有设置我不知道控制间距的散景设置?

更新:

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

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

然后在第一个图形面板下面呈现小部件(您可以在下面的屏幕截图中看到滑块小部件的一部分显示)。

enter image description here

python css bokeh
1个回答
2
投票

在网格或制表符中嵌套列和行时,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)
© www.soinside.com 2019 - 2024. All rights reserved.