如何将独立散景图嵌入到django模板中

时间:2015-04-08 07:53:56

标签: django python-2.7 django-templates bokeh

我想通过django框架在我的web应用程序中显示散景库提供的图形,但我不想使用散景服务器可执行文件,因为它不是好方法。那有可能吗?如果是的话怎么做?

5 个答案:

答案 0 :(得分:51)

使用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> 

它有效。

答案 1 :(得分:5)

您不需要使用散景服务器来嵌入散景图。它只是意味着你不会使用(也可能不需要)它提供的额外功能。

事实上,您可以通过多种方式嵌入散景图,例如生成独立的html,生成散景独立组件,然后您可以在渲染模板时嵌入django应用程序或使用我们称之为“自动加载”的方法,这使得散景返回标签这将取代Bokeh情节。您可以在documentation找到更好的详细信息。

另一个很好的灵感来源是您可以在存储库中找到的embed examples

答案 2 :(得分:2)

必须将 {{the_script | safe}} 放在 head 标记内

答案 3 :(得分:2)

也可以使用AJAX请求。假设我们已经加载了一个页面,并希望在没有重新加载整个页面的情况下显示按钮点击的图表。从Django视图中我们返回Bokeh脚本和JSON中的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);
  }});
});

答案 4 :(得分:1)

这是一个使用jquery与散景图相互作用的flask app。查看templates/您可以重复使用的JavaScript。还在github上搜索bokeh-demos。