web-dev-qa-db-ja.com

スタンドアロンボケグラフをDjangoテンプレートに埋め込む方法

Djangoフレームワーク経由でWebアプリケーションのbokehライブラリが提供するグラフを表示したいが、bokeh-server実行可能ファイルは良い方法ではないので使用したくない。 ？はいの場合、それを行う方法は？

djangopython-2.7django-templatesbokeh
31
Ghada Ben Tekfa

Fabio Pligerが示唆した Embedding Bokeh Plots ドキュメンテーションの例を使用して、Djangoでこれを行うことができます。

の中に views.pyファイル、私たちは置きます：

from Django.shortcuts import render
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

def simple_chart(request):
    plot = figure()
    plot.circle([1,2], [3,4])

    script, div = components(plot, CDN)

    return render(request, "simple_chart.html", {"the_script": script, "the_div": div})

の中に urls.py配置できるファイル：

from myapp.views import simple_chart 
...
...
...
url(r'^simple_chart/$', simple_chart, name="simple_chart"),
...
...

テンプレートファイルsimple_chart.html 我々が持っています ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Experiment with Bokeh</title>
    <script src="http://cdn.pydata.org/bokeh/release/bokeh-0.8.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>

    {{ the_div|safe }}

    {{ the_script|safe }}
</body>
</html>

そしてそれは動作します。

52
iMitwe

ボケプロットを埋め込むためにボケサーバーを使用する必要はありません。それはあなたがそれが提供する追加の機能を使用しない（そしておそらく必要ない）ことを意味します。

実際、テンプレートをレンダリングする際にDjangoアプリに埋め込むことができるbokehスタンドアロンコンポーネントを生成することで、スタンドアロンhtmlを生成するなど、ボケプロットを埋め込むことができます。それ自体をボケプロットで置き換えるタグを返します。 ドキュメント を見ると、より詳細な情報が見つかります。

別の良いインスピレーションの源は、リポジトリにある embed example です。

5
Fabio Pliger

{{the_script | safe}}をheadタグ内に配置する必要があります

2
Xavi Moreno

AJAXリクエストで動作させることもできます。ページがロードされており、ページ全体をリロードせずにボタンをクリックしたときにプロットを表示したいとします。 DjangoビューからJSONでBokehスクリプトとdivを返します。

from Django.http import JsonResponse
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

def simple_chart(request):
  plot = figure()
  plot.circle([1,2], [3,4])

  script, div = components(plot, CDN)

  return JsonResponse({"script": script, "div": div})

JSでAJAX応答を取得すると（この例ではJqueryが使用されます）、最初にdivが既存のページに追加され、次にスクリプトが追加されます。

$("button").click(function(){
  $.ajax({
    url: "/simple_chart", 
    success: function(result){
      var bokeh_data = JSON.parse(result);
      $('#bokeh_graph').html(bokeh_data.div);
      $("head").append(bokeh_data.script);
  }});
});
2
Andrey Grachev

これは、jqueryを使用してボケプロットと対話する flask app です。再利用できるJavaScriptのtemplates/を確認してください。 githubでbokeh-demosも検索してください。

1
hobs