Bokehプロットタグレンダリングの問題

bokehサイトにある埋め込み.htmlの例：http://bokeh.pydata.org/en/latest/docs/user_guide/embed.htmlを使用しています。注：私はbokeh 12.3を使用しています。プロットはうまく表示されていますが、テキストはスクリプト関数の正確な出力としてレンダリングされています - 「{」と「\ n」文字を含みます。Bokehプロットタグレンダリングの問題

散布機能：

from bokeh.plotting import figure 
from bokeh.models import Range1d 
from bokeh.embed import components 

def scatter(): 
    # create some data 
    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] 
    x2 = [2, 5, 7, 15, 18, 19, 25, 28, 9, 10, 4] 
    y2 = [2, 4, 6, 9, 15, 18, 0, 8, 2, 25, 28] 
    x3 = [0, 1, 0, 8, 2, 4, 6, 9, 7, 8, 9] 
    y3 = [0, 8, 4, 6, 9, 15, 18, 19, 19, 25, 28] 

    # select the tools we want 
    TOOLS="pan,wheel_zoom,box_zoom,reset,save" 

    # the red and blue graphs will share this data range 
    xr1 = Range1d(start=0, end=30) 
    yr1 = Range1d(start=0, end=30) 

    # only the green will use this data range 
    xr2 = Range1d(start=0, end=30) 
    yr2 = Range1d(start=0, end=30) 

    # build our figures 
    p1 = figure(x_range=xr1, y_range=yr1, tools=TOOLS, plot_width=300, plot_height=300) 
    p1.scatter(x1, y1, size=12, color="red", alpha=0.5) 

    p2 = figure(x_range=xr1, y_range=yr1, tools=TOOLS, plot_width=300, plot_height=300) 
    p2.scatter(x2, y2, size=12, color="blue", alpha=0.5) 

    p3 = figure(x_range=xr2, y_range=yr2, tools=TOOLS, plot_width=300, plot_height=300) 
    p3.scatter(x3, y3, size=12, color="green", alpha=0.5) 

    # plots can be a single Bokeh Model, a list/tuple, or even a dictionary 
    plots = {'Red': p1, 'Blue': p2, 'Green': p3} 

    script, div = components(plots) 
    return script, div

マイフラスコのコードは次のとおりです。

script, div = scatter() 
return self.render_template('bokeh_example.html', script=script, div=div)

bokeh_example.html：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.css" type="text/css" /> 
     <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.12.3.min.js"></script> 
     {{ script | safe }} 
</head> 
<body> 
    <div class='bokeh'> 
     <h1>Scatter Example</h1> 
     {{ div | safe }} 
    </div> 
</body> 
</html>

プロットは細かい表示が、divのテキストがリテラルとしてレンダリング：

{'Red': '\n #this text displays instead of just the string 'Red' 
\n    #this displays on next line in smaller font 
#plot displays fine here 
\n    #this text displays after the plot instead of creating a blank line.

手がかりはありますか？

出典

2016-12-27 Don Smythe

私は（考えられる）ヒントを持っていますが、最も関連性の高い部分は除外しました。これは実際にBokehの 'components'関数に渡しています。その情報であなたの質問を更新してください。 – bigreddot

@bigreddot私はscatter関数を追加しました。乾杯 –

あなたはcomponentsにプロットの辞書を渡している。

plots = {'Red': p1, 'Blue': p2, 'Green': p3} 

script, div = components(plots) 
return script, div

この手段（documentationあたり）結果は、単一のスクリプトや単一のdivではないこと。むしろ、それは単一のスクリプトと複数のdivにあなたの元の名前をマッピングする辞書です：

components({"Red": p1, "Blue": p2, "Green": p3}) 
#=> (script, {"Red": p1_div, "Blue": p2_div, "Green": p3_div})

今、あなたのHTMLに辞書そのものをテンプレートにしようとしています。たぶんJinjaは文字列に変換するためにstrを呼び出すだけで、ブラウザはその処理を知らないでしょう。それぞれcomponentsによって返されるdictの各divをテンプレート化する必要があります。あなたが直接収集しているテンプレート引数を反復処理するためにJinja2のの機能の一部を使用してdivsを反復処理するためのテンプレートを更新する可能性があります

script, divs = scatter() # notice plural: divS 
return self.render_template(
    'bokeh_example.html', 
    script=script, 
    div_red=divs['Red'], 
    div_blue=divs['Blue'], 
    div_green=divs['Green'], 
)

または代わりに：のように見えるかもしれません適切に更新されたテンプレートについては、

。

出典

2016-12-27 02:04:34 bigreddot

Bokehプロットタグレンダリングの問題

答えて

関連する問題