散景服务器：自定义行比

Question

我使用 Bokeh 将科学数据可视化了一段时间，但我未能按我的意愿自定义布局。

from bokeh.plotting import figure
from bokeh.io import show
from bokeh.layouts import row
from bokeh.models.widgets import Button

tools_to_show = 'hover, box_zoom, save, reset, pan'
p = figure(tools=tools_to_show, output_backend = "webgl")
p.line([1, 2, 3, 4], [9, 5, 7, 6])

b_valid = Button(label="valid")

my_plot = row(p, b_valid, sizing_mode="stretch_both")

show(my_plot)

我有一个绘图区和一个控制区。控制区域应该更小，可能是可用宽度的 1/3，以让绘图具有更大的区域（可用宽度的 2/3）。

我使用 sizing_mode = "stretch_both" 来确保使用屏幕中的所有可用空间。

我需要继续使用散景服务器 (bokeh serve myapp.py) 来让 python 回调工作，所以建议的嵌入式解决方案 here 不适合我。

也许serving directory 有一种带有散景命令的方法，因为有一个模板机制，但我不知道如何为绘图和控件获取单独的 div。

你有什么（简单的）想法吗？

编辑：它似乎不是散景当前可用的功能。一个有前途的解决方案是能够使用散景服务器将组件嵌入模板中：amilestone 已安排

Answer 1

我想说的是，我们正在放弃内置布局系统，而不仅仅是为了非常简单的事情。 PR #7708 刚刚合并，将在即将发布的 0.13.0 版本中。当0.13.0 可用时，您可以在模板中单独嵌入单个文档根，例如如果您在 Bokeh 服务器应用程序中定义五个绘图：

curdoc().add_root(p0)
curdoc().add_root(p1)
curdoc().add_root(p2)
curdoc().add_root(p3)
curdoc().add_root(p4)

它们都可以放在响应式 Bootstrap 布局中：

<div class="row">
  <div class="col-sm-8">
    {{ embed(doc.roots[0]) }}
    <br>
  </div>
  <div class="col-sm-4">
    {{ embed(doc.roots[1]) }}
    <br>
  </div>
</div>

<div class="row">
  <div class="col-sm-4">
    {{ embed(doc.roots[2]) }}
    <br>
  </div>
  <div class="col-sm-4">
    {{ embed(doc.roots[3]) }}
    <br>
  </div>
  <div class="col-sm-4">
    {{ embed(doc.roots[4]) }}
    <br>
  </div>
</div>