2016-05-11 7 views
2

bokehのウェブサイトとスタックオーバーフローで過去3時間を検索しましたが、本当に私が探していたものはありません。複数のbokeh HTMLプロットをフラスコに埋め込む

私のプロットはすでに生成されており、htmlファイルになっています。私がしたいのは、下の写真の白い部分に形成されたマルチグリッドのダッシュボードにプロットを埋め込むことだけです。しかし、2つのプロットを追加すると、オーバーレイされて本当に奇妙なものになります。

enter image description here

私はグラフをこのように含めるために{{含める}}メソッドを使用:

enter image description here

誰も私だけでなく、それらを揃える方法についての指針を与えることができますか?理想的には、そのスペースに6つの小さなプロットが必要です。私はダッシュボードを読み込むたびにプロットを再生成したくなかったので、埋め込み方法が欲しくなかった。応答= Trueの作品を使用して、のビッグ提案以下、しかし、私は、CSSスタイルを制御することができませんやチャートのサイズは、私がその操作を行うために疑う!

どうもありがとうございます:(

EDITを助けてください。含めるタグを使用して。誰が?助けることができる:)

あなたは、水平レイアウト horizontal-layout

Whのでそれをしようといけないのはなぜ

enter image description here

+0

Bokeh '0.12'の組み込みレイアウト機能を今月後半に大幅に改善して、デフォルトで反応させる作業が進行中です。 Bokeh '0.11.1'の時点では、あなたの状況に役立つかもしれない' Plot'オブジェクトに設定できる 'responsive'フラグがあります。ここでは例を見ることができます(https://github.com/ボブ/ボケ/ブロブ/マスター/サンプル/埋め込み/埋め込み/マルチプルレスポンス)と[ここ](https://github.com/bokeh/bokeh/blob/master/examples/embed/embed_responsive_width_height.py) – bigreddot

+0

ありがとう応答!レスポンスは機能しますが、CSSのスタイリングを制御できません。私はインクルードタグ付きのフラスコに何か間違っていると思う:S – Wboy

+0

私はいくつかのサンプルコードで公開メーリングリストに来てください、それは前後の議論にはるかに役立ちます。 "Not An Answer"を投稿すると、あなたが怒っている人がいるかもしれません。 – bigreddot

答えて

2

をあなたの道({%include%})、私は解決策を見つけられないので、おそらく、スートラートフラスコを使用しなければなりません。 Pythonのファイル:

#Your imports 
from flask import Flask, render_template 
from bokeh.embed import components 
from bokeh.plotting import figure 



@app.route('/') 
def homepage(): 
    title = 'home' 
    from bokeh.plotting import figure 

    #First Plot 
    p = figure(plot_width=400, plot_height=400, responsive = True) 
    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) 

    #Second Plot 
    p2 = figure(plot_width=400, plot_height=400,responsive = True)   
    p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5) 


    script, div = components(p) 
    script2, div2 = components(p) 

    return render_template('index.html', title = title, script = script, 
    div = div, script2 = script2, div2 = div2) 

あなたのHTMLファイル:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link 
    href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.css" 
    rel="stylesheet" type="text/css"> 
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.js"></script> 

    <meta charset="UTF-8"> 
    <title>{{title}}</title> 


</head> 


<body> 


    <div style="width: 20%; display: inline-block;"> 

     {{ div | safe }} 
     {{ script | safe }} 

    </div> 

    <div style="width: 20%; display: inline-block;"> 

     {{ div2 | safe }} 
     {{ script2 | safe }} 


    </div> 



</body> 
</html> 

そして、もう一つ別の先端はをmain.py my_plots.py のようなPythonのファイルを作成し、そこにあなたのプロットを追加し、あなたにインポートすることですそれはあなたのコードクリーナーを行います。 (これはあなたのスピードに影響を与える場合、私は100%を知っていないが、私は今までどんなことも見ていない)例えば。

my_plots.py:

from bokeh.plotting import figure 

def first_plot(): 

    p = figure(plot_width=400, plot_height=400, responsive = True) 
    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5) 
    return p 

def second_plot(): 

    p2 = figure(plot_width=400, plot_height=400, responsive = True) 
    p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5) 
    return p2 

main.py:私は参考になりました

@app.route('/') 
def homepage(): 
    title = 'home' 

    #First Plot 
    from my_plots import first_plot 
    p = first_plot() 

    #Second Plot 
    from my_plots import second_plot 
    p2 = second_plot() 

    script, div = components(p) 
    script2, div2 = components(p) 

    return render_template('index.html', title = title, script = script, 
    div = div, script2 = script2, div2 = div2) 

希望、グッドラック!

+0

10枚以上のチャートを持っているときに少し難しいですが、動作します:)ありがとう! – Wboy

+0

@Leo、それはscript2、div2 = components(p2)であってはなりませんか、間違っていますか? –

関連する問題