情节和小部件安排的散景布局

Question

我的散景应用程序有一个特定的设计.我正在使用bokeh 0.12.3和一个散景服务器来保持一切同步.请看看我的模型:

在左侧,有一个静态导航栏,视图的右侧部分将由手动添加的图组成.右侧的绘图列数量应改变窗口大小.我很清楚散布布局文档布局图和小部件,但它有点复杂.这是我目前的布局:

doc_layout = layout(children=[[column(radio_buttons,
                                      cbx_buttons,
                                      div,
                                      data_table,
                                      plot,
                                      button)]],
                    sizing_mode='scale_width')
curdoc().add_root(doc_layout)

为了添加我使用的新图:

doc_layout.children[-1].children.append(plot)
# appends plot to layout children [[column(..), plot]]

但这种行为很奇怪,而且根本不是我想要达到的目标.新的图表添加在列(菜单面板)的顶部.

这里有一个简短的例子,你可以尝试看看我的意思:

from bokeh.io import curdoc
from bokeh.plotting import figure
from bokeh.models.sources import ColumnDataSource
from bokeh.models.widgets import Button, DataTable, TableColumn
from bokeh.layouts import layout, widgetbox, column, row

WIDTH = 200
HEIGHT = 200

def add_plot():
    p = figure(width=WIDTH, height=HEIGHT, tools=[], toolbar_location=None)
    p.line([0, 1, 2, 3, 4, 5], [0, 1, 4, 9, 16, 25])
    doc_layout.children[-1].children.append(p)

src = ColumnDataSource(dict(x=[0, 1, 2, 3, 4, 5], y=[0, 1, 4, 9, 16, 25]))
t1 = DataTable(source=src, width=WIDTH, height=HEIGHT,
               columns=[TableColumn(field='x', title='x'),
                        TableColumn(field='y', title='y')])
b = Button(label='add plot')
b.on_click(add_plot)

doc_layout = layout([[widgetbox(b, t1)]], sizing_mode='scale_width')
curdoc().add_root(doc_layout)

我不确定解决这个问题的最佳解决方案是什么.我已经试过几件事情,从layout()不同大小的模式,gridplot(),column()/ row()在不同的组合.在我以前的版本中,导航菜单位于页面顶部而不是左侧,一切似乎都有效:

layout(children=[[widgetbox(radio_button, cbx_button),
                  widgetbox(data_table),
                  widgetbox(div),
                  widgetbox(button)],
                  [Spacer()]],
       sizing_mode='scale_width')

Answer 1

您可以将回调中的最后一行更改为：

doc_layout.children[0].children[-1].children.append(p)

并将布局更改为：

doc_layout = layout(sizing_mode='scale_width') 
doc_layout.children.append(row(column(widgetbox(b, t1)), column()))

但然后就不要完全按照你想要的方式传播。我认为为此你需要做一些自定义 CSS 样式。

假设您的应用程序是目录格式的应用程序，一种选择是创建一个template/index.html文件，您可以style在标头中添加一个块，您可以尝试覆盖 css 来制作您的绘图inline-block或其他内容。

<style>
  .bk-whatever-class {
    ...
  }
</style>

使用浏览器上的开发人员工具找到合适的类并使用它们。但也许不是最好的解决方案......

对于小部件，有一个css_classes属性，您可以在其中指定该小部件要使用的类，但不幸的是，这对绘图画布没有帮助。

mycol = column(css_classes=['myclass'])