python - 散景自定义布局

问题描述

我的问题与此处提出的问题类似。我想在 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)

标签： pythonlayoutbokeh

最近有很大的努力从头开始完全重新设计 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)

产生：

python - 散景自定义布局

问题描述

解决方案

推荐阅读