tutorial - linebreaksbr django
Cómo incrustar gráficos bokeh independientes en las plantillas de Django (5)
Aquí hay una
aplicación de matraz
que usa jquery para interactuar con un diagrama de bokeh.
Consulte las
templates/
para javascript que puede reutilizar.
También busque bokeh-demos en github.
Quiero mostrar gráficos ofrecidos por la biblioteca bokeh en mi aplicación web a través de django framework, pero no quiero usar el ejecutable del servidor bokeh porque no es la mejor manera. entonces, ¿es eso posible? en caso afirmativo, ¿cómo hacer eso?
Debe poner {{the_script | safe}} dentro de la etiqueta principal
No necesita usar el servidor bokeh para incrustar diagramas de bokeh. Simplemente significa que no usará (y probablemente no necesitará) las características adicionales que proporciona.
De hecho, puede incrustar diagramas de bokeh de muchas maneras, como generar html independiente, generando componentes independientes de bokeh que luego puede incrustar en su aplicación django al renderizar plantillas o con el método que llamamos "carga automática" que hace que bokeh devuelva una etiqueta que reemplazará en sí con una trama Bokeh. Encontrará mejores detalles mirando la documentation .
Otra buena fuente de inspiración son los ejemplos de inserción que puede encontrar en el repositorio.
También es posible que funcione con solicitudes AJAX. Digamos que tenemos una página cargada y nos gustaría mostrar un diagrama al hacer clic en el botón sin volver a cargar toda la página. Desde la vista de Django, devolvemos el script Bokeh y div en 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})
Cuando obtenemos la respuesta AJAX en JS (en este ejemplo, se usa Jquery), el div primero se agrega a la página existente y luego se agrega el script:
$("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);
}});
});
Usando el ejemplo de documentación de Embedded Bokeh Plots como lo sugiere Fabio Pliger, uno puede hacer esto en Django:
en el archivo
views.py
, ponemos:
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})
en el archivo
urls.py
podemos poner:
from myapp.views import simple_chart
...
...
...
url(r''^simple_chart/$'', simple_chart, name="simple_chart"),
...
...
en el archivo de plantilla
simple_chart.html
tendremos:
<!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>
Y funciona.