python - Bokeh 自定义布局

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版本发布。

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

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

产生: