散景自定义布局

Question

我的问题类似于提出的here。我想在Bokeh中创建一个包含2列的嵌套布局：

但是，右列填充了其他绘图类型，而不仅仅是小部件。

我已经阅读了docs中可用的布局，但我无法达到预期的效果。我已经构建了一个显示我的方法之一的最小示例：

import numpy as np

from bokeh.plotting import figure, curdoc, show
from bokeh.models import ColumnDataSource, FactorRange, CustomJS, Slider
from bokeh.models.widgets import Panel, Tabs
from bokeh.layouts import gridplot, row, column, layout

### Main Image
N = 500
x = np.linspace(0, 10, N)
y = np.linspace(0, 10, N)
xx, yy = np.meshgrid(x, y)
d = np.sin(xx)*np.cos(yy)

p1 = figure(plot_width=640, plot_height=480, x_range=(0, 10), y_range=(0, 10),
           tooltips=[("x", "$x"), ("y", "$y"), ("value", "@image")])
p1.image(image=[d], x=0, y=0, dw=10, dh=10, palette="Spectral11")
p1.axis.visible = False

### Bottom histogram
fruits = ['Apples', 'Pears', 'Nectarines', 'Plums', 'Grapes', 'Strawberries']
counts = [5, 3, 4, 2, 4, 6]

p2 = figure(plot_width=800, plot_height=200, x_range=fruits, title="Fruit Counts",
           toolbar_location=None, tools="")
p2.vbar(x=fruits, top=counts, width=0.9)
p2.xgrid.grid_line_color = None
p2.y_range.start = 0

### Right slider
t_slider = Slider(start=0.0, end=1.0, value=1.0, step=.01,
                  title="Threshold", width=140)

### Right image
N = 28
d = np.random.randint(low=0, high=10, size=(N, N))
p3 = figure(plot_width=140, plot_height=140, x_range=(0,N), y_range=(0,N), toolbar_location=None, title='Another image')
p3.image(image=[d], x=0, y=0, dw=N, dh=N, palette="Viridis11")
p3.axis.visible = False

l = gridplot([[p1, column(t_slider, p3)],[p3]])
curdoc().add_root(l)
show(l) 

Answer 1

最近，人们付出了巨大的努力，从头开始彻底改造Bokeh的布局。这项工作已经合并，但还没有发布（它将是即将推出的1.1版本）。当我使用1.1.0dev6运行代码时，结果看起来是正确的：

这似乎与提供的布局完全匹配（如果我将底部图更改为p2）：

l = gridplot([[p1, column(t_slider, p3)],[p2]])

因此，解决方案是等待1.1版本（本月晚些时候）或者如果你想尽快尝试，install a Dev Build。 （但请注意：dev build JS / CSS资源不能保证永久可用。你不应该在生产中使用dev build，并且应该尽快切换到真正的完整版本。）

请注意，如果您希望底部直方图跨越整个底部，您可能需要一个更像这样的布局，将顶部/底部部分放在一列中：

l = column(gridplot([[p1, column(t_slider, p3)]]), p2)

产量：