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

Question

我想通过 django 框架在我的 Web 应用程序中显示 bokeh 库提供的图形，但我不想使用 bokeh-server 可执行文件，因为这不是好方法。那可能吗？如果是，该怎么做？

Answer 1

您不需要使用散景服务器来嵌入散景图。这只是意味着您不会使用（并且可能不需要）它提供的额外功能。

事实上，您可以通过多种方式嵌入散景图，例如生成独立 html，通过生成散景独立组件，然后您可以在呈现模板时或使用我们调用的方法将其嵌入到 django 应用程序中 "autoloading" 这使得 bokeh return 成为一个将用散景图替换自身的标签。您会在 documentation 中找到更好的详细信息。

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

Answer 2

使用 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.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>

    {{ the_div|safe }}

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

并且有效。

Answer 3

必须将 {{the_script|safe}} 放入 head 标签

Answer 4

这是一个使用 jquery 与散景图交互的 flask app。查看 templates/ 是否可以重复使用 javascript。还可以在 github 上搜索散景演示。

Answer 5

也可以让它与 AJAX 请求一起工作。假设我们加载了一个页面，并希望在不重新加载整个页面的情况下单击按钮显示一个图。从 Django 的角度来看，我们 return Bokeh 脚本和 div 在 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})

当我们在 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);
  }});
});

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

how to embed standalone bokeh graphs into django templates

django

python-2.7

django-templates

bokeh