プロットとウィジェットの配置のためのbokehレイアウト

Question

私のbokeh appには、特別なデザインがあります。私はbokeh 0.12.3とボケサーバーを使ってすべてを同期させています。静的ナビゲーションバー、ビューの右部分手動で追加されたプロット、で構成されますがあり、左側に

：、私のモックアップを見てください。右側のプロット列の量はw.r.tに変更されます。ウィンドウサイズ。私は、bokehレイアウトのドキュメント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) 

私はこの問題を克服するための最良の解決策は何かわかりません。私はさまざまな組み合わせでgridplot()、column()/row()異なるサイジングモードでlayout()からいくつかを試しました。ナビゲーションメニューではなく左側にページの上に置いた私の以前のバージョンでは、すべてが動作するように見えた：

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スタイルを行う必要があると思います。あなたと仮定すると

は一つの選択肢は、あなたがあなたのプロットinline-blockのか何かを作るために、CSSを上書きしようとすることができ、ヘッダにstyleブロックを追加することができtemplate/index.htmlファイルを作成することですdirectory formatアプリです。

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

ブラウザで開発者ツールを使用して、適切なクラスとおもちゃを見つけてください。しかしおそらく最善の解決策ではないかもしれません....

ウィジェットには、そのウィジェットが使用するクラスを指定することができるcss_classes属性がありますが、残念ながらプロットキャンバスは役に立ちません。

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