Question

我的散景应用程序有一个特定的设计。我使用bokeh 0.12.3和散景服务器来保持所有内容同步。请看看我的模型：

在左侧，有一个静态导航栏，视图的右侧部分将包含手动添加的绘图。右侧的绘图栏数量应改变为w.r.t.窗口大小。我很清楚散景布局文档laying out plots and widgets，但它有点复杂。这是我目前的布局：

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样式。

假设您的应用是directory format个应用，一个选项就是制作一个template/index.html文件，您可以在标题中添加style块，您可以尝试覆盖css你的情节inline-block或其他东西。

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

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

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

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

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

1 个答案: