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

【问题标题】：how to embed standalone bokeh graphs into django templates如何将独立的散景图嵌入到 django 模板中
【发布时间】：2015-06-13 01:48:14
【问题描述】：

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

【问题讨论】：

标签： django python-2.7 django-templates bokeh

【解决方案1】：

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

而且它有效。

【讨论】：

感谢您将建议付诸实践！实际上，添加一些“我怎样才能将我的散景图嵌入 {whatever_web_framework}？”文档或某处的部分可能是一个很好的补充。如果您想对此提供帮助，请提出要讨论的问题或添加此类示例的 PR，请随时这样做。将不胜感激！谢谢！
如果您在脚本和 css 中将版本更改为 0.11.1，它也适用于 Bokeh 0.11.1。
如果你只是得到一个白屏并且在浏览器控制台中你看到'TypeError: Bokeh.safely is not a function'，那么请参考：stackoverflow.com/questions/43612360/…

【解决方案2】：

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

事实上，您可以通过多种方式嵌入散景图，例如生成独立的 html，通过生成散景独立组件，然后您可以在渲染模板时嵌入到 django 应用程序中，或者使用我们称为“自动加载”的方法使散景返回标签这将用散景图代替自己。查看documentation，您会发现更详细的信息。

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

【讨论】：

【解决方案3】：

它也可以处理 AJAX 请求。假设我们加载了一个页面，并希望在按钮单击时显示一个绘图而不重新加载整个页面。从 Django 视图中，我们以 JSON 格式返回 Bokeh 脚本和 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);
  }});
});

【讨论】：

这对我来说效果很好，但我不得不删除 JSON.parse()

【解决方案4】：

它必须把 {{the_script|safe}} 放在 head 标签内

【讨论】：

您可以在任何地方输入，甚至在页面的页脚处。
为了改进用户实验以减少页面的加载时间，在页脚中可能会更好

【解决方案5】：

这是一个flask app，它使用 jquery 与散景图交互。查看templates/ 了解您可以重复使用的javascript。也可以在 github 上搜索 bokeh-demos。

【讨论】：

链接失效
散景似乎删除了他们的散景演示回购。但其他人也创造了类似的。这是一个使用flask和jquery的ajax演示：github.com/kgullikson88/bokeh-demos/tree/stocks_demo/stocks