come incorporare autonomo bokeh grafici in modelli di django

Voglio visualizzare i grafici offerti da il bokeh libreria nella mia applicazione web tramite il framework django, ma non voglio utilizzare il bokeh-eseguibile del server, perché non è il buon senso. quindi, è possibile? se sì, come fare?

 

5 Replies
  1. 51

    Utilizzando il Incorporamento Bokeh Trame documentazione di esempio, come suggerito da Fabio Pliger, si può fare questo in Django:

    in views.py file, abbiamo messo:

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

    in urls.py file, si può mettere :

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

    nel file di modello simple_chart.html avremo :

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

    E funziona.

    • Grazie per mettere il suggerimento in pratica! In realtà, l’aggiunta di alcune “come è possibile incorporare il mio bokeh trama {whatever_web_framework}?” sezione per i documenti o da qualche parte potrebbe essere una buona aggiunta. Se si vuole aiutare con questo, proporre un argomento di discussione o un PR l’aggiunta di questo tipo di esempio per favore, sentitevi liberi di farlo. Sarebbe molto apprezzato! Grazie!
    • Se si modifica la versione di 0.11.1 negli script e css, funziona anche con Bokeh 0.11.1.
    • Se avete solo una schermata bianca e nella console del browser si vede ‘TypeError: Bokeh.sicuro non è una funzione”, quindi fare riferimento a: stackoverflow.com/questions/43612360/…
  2. 5

    Non è necessario utilizzare bokeh-server incorporare bokeh trame. Significa solo che non utilizza (e probabilmente non ne hai bisogno) le funzioni extra che fornisce.

    Infatti, è possibile incorporare bokeh trame in molti modi, come la generazione autonoma di html, generando un effetto bokeh autonoma di componenti che è possibile incorporare in voi app django durante il rendering di modelli o con il metodo che noi chiamiamo “autoload”, che fa il bokeh restituire un tag che andrà a sostituire la stessa con un Bokeh trama. Troverete i dettagli di una migliore guardando il documentazione.

    Un’altra buona fonte di ispirazione è il incorporare esempi si possono trovare nel repository.

    • grazie mille Fabio
  3. 2

    Deve mettere {{the_script|sicuro}} all’interno del testa tag

    • È possibile inserire dove si vuole, anche a piè di pagina.
    • e per migliorare l’esperimento nel diminuire il tempo di caricamento della pagina, è probabilmente meglio a piè di pagina
  4. 2

    È anche possibile che lavorare con le richieste AJAX. Supponiamo di avere una pagina caricata e vorrei mostrare un terreno su clic del pulsante senza ricaricare l’intera pagina. Da Django vista torniamo Bokeh script e div in 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})

    Quando abbiamo AJAX risposta in JS (in questo esempio Jquery) la div prima viene aggiunto alla pagina esistente, e quindi lo script viene aggiunto:

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

Lascia un commento