2015-04-08 7 views

Odpowiedz

45

Na przykładzie Embedding Bokeh Plots dokumentacji sugerowane przez Fabio Pliger, można to zrobić w Django:

w pliku views.py, kładziemy:

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}) 

w pliku urls.py możemy umieścić:

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

w pliku szablonu simple_chart.html będziemy mieli:

<!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> 

I działa.

+6

Dzięki za wprowadzenie sugestii w praktyce! Właściwie, dodając kilka "jak mogę umieścić mój spisek bokeh w {whatever_web_framework}?" sekcja do dokumentów lub gdzieś mogłaby być dobrym dodatkiem. Jeśli chcesz w tym pomóc, zaproponuj temat do dyskusji lub PR dodając ten przykład, możesz to zrobić. Byłbym bardzo doceniony! Dzięki! –

+1

Jeśli zmienisz wersję na 0.11.1 w skryptach i css, działa również z Bokehem 0.11.1. –

5

Nie musisz używać bokeh-serwera do osadzania wykresów bokeh. Oznacza to, że nie będziesz używać (i prawdopodobnie nie potrzebujesz) dodatkowych funkcji, które zapewnia.

W rzeczywistości możesz osadzić wykresy bokeh na wiele sposobów, na przykład generując samodzielny html, generując niezależne komponenty bokeh, które możesz następnie osadzić w aplikacji django podczas renderowania szablonów lub za pomocą metody, którą nazywamy "autoloadingiem", co powoduje, że bokeh zwraca tag, który zastąpi się działką Bokeh. Więcej informacji znajdziesz na stronie documentation.

Innym dobrym źródłem inspiracji jest embed examples, którą można znaleźć w repozytorium.

+0

Dziękuję bardzo Fabio –

2

Należy umieścić {{the_script | bezpieczną}} wewnątrz głowy tagu

+2

Możesz wprowadzać w dowolnym miejscu, nawet w stopce strony. – iMitwe

+0

i dla ulepszenia eksperymentu użytkownika w zmniejszaniu czasu ładowania strony, prawdopodobnie jest lepiej w stopce – negstek

1

Oto flask app który wykorzystuje jQuery interract z działki bokeh. Sprawdź kod templates/ dla javascript, którego możesz ponownie użyć. Szukaj również bokeh-demos na github.

+1

link jest martwy – Jonathan

+0

Wygląda na to, że bokeh zostało usunięte z repozytorium bokeh-demos. Ale inni stworzyli podobne.Ten jest demo ajax za pomocą kolby i jquery: https://github.com/kgullikson88/bokeh-demos/tree/stocks_demo/stocks – hobs

2

Istnieje również możliwość pracy z żądaniami AJAX. Załóżmy, że mamy załadowaną stronę i chcemy pokazać wykres na kliknięciu przycisku bez ponownego ładowania całej strony. Z widoku Django wracamy skrypt bokeh i div w JSON:

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}) 

Kiedy otrzymujemy odpowiedzi AJAX w JS (w tym przykładzie jQuery jest używany) div najpierw dołączone do istniejącej strony, a następnie skrypt jest dołączana:

$("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); 
    }}); 
});