中心埋め込みBokehプロット

どのように埋め込みBokehプロットを中心に配置できますか？私のCSSはBokehの<div class="plotdiv">には何の効果もないようです。以下の最小限の例では、プロットを黄色のコンテナの中央に配置します。中心埋め込みBokehプロット

from jinja2 import Template 
from bokeh.embed import components 
from bokeh.models import Range1d 
from bokeh.plotting import figure 
from bokeh.resources import INLINE 
from bokeh.util.browser import view 

x1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 
y1 = [0, 8, 2, 4, 6, 9, 5, 6, 25, 28, 4, 7] 

p1 = figure(plot_width=300, plot_height=300) 
p1.scatter(x1, y1, size=12, color="red", alpha=0.5) 

script, div = components(p1) 

template = Template('''<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Bokeh Scatter Plots</title> 
     {{ js_resources }} 
     {{ css_resources }} 
     {{ script }} 
    <style> 
    .wrapper { 
     width: 800px; 
     background-color: yellow; 
     margin: 0 auto; 
     } 

    .plotdiv { 
     margin: 0 auto; 
     } 
    </style> 
    </head> 
    <body> 
    <div class='wrapper'> 
     {{ div }} 
    </div> 
    </body> 
</html> 
''') 

js_resources = INLINE.render_js() 
css_resources = INLINE.render_css() 

filename = 'embed_multiple.html' 

html = template.render(js_resources=js_resources, 
         css_resources=css_resources, 
         script=script, 
         div=div) 

with open(filename, 'w') as f: 
    f.write(html) 

view(filename)

**以下の充填剤は、** SEのロボットをなだめるためにのみ追加され

SEのロボットは、この質問があるので、私は、「詳細」を追加したい「ほとんどのコード。」ちょっと、ロボット、問題は簡単です、そして、私は宿題をして人々が私を助けやすいようにしようとしているので、 "ほとんどコード"です。私のために、次の作品に変えボケ0.11.1で

出典

2016-05-14 bongbang

：

.bk-plot-wrapper table { 
    margin: 0 auto; 
}

問題はdiv.bk-plot-wrapperが囲む<div>のすべてのスペースを占めています。しかし、プロットをレイアウトする内部の<table>はそうではありません。私はCSSのエキスパートではありませんが、他の人が他の情報を追加する可能性があります

2つのメモ：Bokehのバージョンはわかりません。.plotdivはしばらく使用されていません。また、レイアウトの基本的な改善のいくつかは、0.12に上陸し、Bokehをデフォルトで「webby」にしてくれるので、上記のコードはおそらく0.12（特に<table>は去っています）で動作しません。

出典

2016-05-14 11:39:27 bigreddot

これは機能します。どうもありがとう。私も '0.11.1'を使用しています。 'plotdiv'クラスは[bokehによって生成されたdiv]（http://bokeh.pydata.org/en/0.11.0/docs/user_guide/embed.html）に割り当てられ、ページ上のプロットに配置されますだから、私はそれをスタイルすることができると思っていた。私は巨大なJSの中のbk-plot-wrapperについて知るほどスマートでも患者でもなかった。 – bongbang

それを指摘してくれてありがとう、私は更新する必要があるかもしれないと思う。 – bigreddot

'table'を内部でスタイリングするのではなく、' display：table'を使って '.bk-plot-wrapper' divをスタイルして、使用可能な幅をすべて使い切らないようにします。うまくいけば、これはより前方互換性があります。 – bongbang

中心埋め込みBokehプロット

答えて

関連する問題