散景自定义布局

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版本）。当我使用**TABLE A:** @Entity() @Audited @Table(name = "TABLE_A") @Column(name = "ID") private Long id; @Column(name = "NAME", length = 50) private String name; @OneToMany( mappedBy = "table_a", cascade = {CascadeType.MERGE, CascadeType.PERSIST} ) @org.hibernate.annotations.Cascade( {org.hibernate.annotations.CascadeType.SAVE_UPDATE, org.hibernate.annotations.CascadeType.DELETE_ORPHAN} ) private Collection<TABLE_B> table_b = new ArrayList<TABLE_B>(); **TABLE B:** @Entity() @Audited @Table(name = "TABLE_B") @Column(name = "ID") private Long id; @Column(name = "NAME", length = 50) private String name; @XmlTransient @ManyToOne() @JoinColumn(name = "ID_TABLE_B", nullable = false) private TABLE_A table_a; @ManyToOne( cascade = {CascadeType.MERGE, CascadeType.PERSIST}) @org.hibernate.annotations.Cascade( {org.hibernate.annotations.CascadeType.SAVE_UPDATE} ) @JoinColumn(name = "ID_TABLE_C") private TABLE_C table_c; @ManyToOne( cascade = {CascadeType.MERGE, CascadeType.PERSIST}) @org.hibernate.annotations.Cascade( {org.hibernate.annotations.CascadeType.SAVE_UPDATE} ) @JoinColumn(name = "ID_TABLE_D", nullable = true) private TABLE_D table_d; **TABLE C:** @Entity() @Audited @Table(name = "TABLE_C") @Column(name = "ID") private Long id; @Column(name = "NAME", length = 50) private String name; @OneToMany( mappedBy = "table_c", cascade = { CascadeType.REMOVE}) @org.hibernate.annotations.Cascade( {org.hibernate.annotations.CascadeType.SAVE_UPDATE, org.hibernate.annotations.CascadeType.MERGE, org.hibernate.annotations.CascadeType.DELETE_ORPHAN} ) @XmlTransient private Collection<TABLE_B> table_b = new HashSet<TABLE_B>(); **TABLE D:** @Entity() @Audited @Table(name = "TABLE_D") @Column(name = "ID") private Long id; @Column(name = "NAME", length = 50) private String name; @XmlTransient @OneToMany( mappedBy = "table_d", cascade = {CascadeType.MERGE, CascadeType.PERSIST} ) private Collection<TABLE_B> table_b = new ArrayList<TABLE_B>(); 运行您的代码时，结果似乎是正确的：

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

p2

因此，解决方案是等待1.1版本（本月末），或者如果您想早点尝试install a Dev Build。 （但请注意：保证 不会永久提供dev build JS / CSS资源。您不应在生产环境中使用dev build，而应尽快切换到真正的完整版本。 ）

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

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

产生：