时间戳

首页 > 解决方案 > 散景删除网格图中元素之间的空间

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

问题描述

我有一个 Bokeh 应用程序bokeh==1.0.1（我正在使用sizing_mode='stretch_both'. 如何消除小部件行和其他图形面板之间的空白？这是一个屏幕截图：

在此处输入图像描述

我为小部件创建了一个布局，如下所示：

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 规则来定义包含 div 的高度hor_layout_date_slider，但是对于这个元素仍然存在一个“占位符”（我无法使用检查元素访问）。

我还尝试使用仅包含滑块的简单小部件框（未定义高度和宽度并使用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)

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

在此处输入图像描述

标签： pythoncssbokeh

解决方案

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)

推荐阅读