如何将独立的bokeh图嵌入django模板_Django_Python 2.7_Django Templates_Bokeh

如何将独立的bokeh图嵌入django模板

django python-2.7

如何将独立的bokeh图嵌入django模板,django,python-2.7,django-templates,bokeh,Django,Python 2.7,Django Templates,Bokeh,我想通过django框架在我的web应用程序中显示bokeh库提供的图形，但我不想使用bokeh服务器可执行文件，因为这不是好方法。那有可能吗？如果是，怎么做？您不需要使用bokeh服务器来嵌入bokeh绘图。它只是意味着你将不会使用（也可能不需要）它提供的额外功能事实上，您可以通过许多方式嵌入bokeh绘图，比如生成独立html，方法是生成bokeh独立组件，然后在呈现模板时将其嵌入到django应用程序中，或者使用我们称之为“自动加载”的方法，使bokeh返回一个标记，该标记将用bokeh

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

您不需要使用bokeh服务器来嵌入bokeh绘图。它只是意味着你将不会使用（也可能不需要）它提供的额外功能

事实上，您可以通过许多方式嵌入bokeh绘图，比如生成独立html，方法是生成bokeh独立组件，然后在呈现模板时将其嵌入到django应用程序中，或者使用我们称之为“自动加载”的方法，使bokeh返回一个标记，该标记将用bokeh绘图替换自身。你会发现更好的细节，看看

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

使用Fabio Pliger建议的文档示例，您可以在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>


波基实验
{{安全分区}
{{{u脚本{124;安全}}

它是有效的

它必须将{{the|u script | safe}}放在head标记中

下面是一个使用jquery与bokeh绘图交互的脚本。查看

模板/

中可以重用的javascript。还可以在github上搜索bokeh演示

也可以让它处理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);
  }});
});

谢谢你把这个建议付诸实践！实际上，在文档或其他地方添加一些“如何将我的bokeh图嵌入{which_web_framework}？”部分可能是一个很好的补充。如果你想在这方面有所帮助，可以提出一个问题供讨论，或者在公共关系中加入这样的例子，请随意这样做。非常感谢！谢谢如果您在脚本和css中将版本更改为0.11.1，它也适用于Bokeh 0.11.1。如果您只是得到一个白色屏幕，并且在浏览器控制台中看到“TypeError:Bokeh.safety不是一个函数”，请参阅：您可以在任何地方输入，即使是在页面的页脚。为了改进用户在减少页面加载时间方面的实验，在页脚的链接可能会更好。链接似乎已被删除。但其他人也创造了类似的模式。这是一个使用flask和jquery的ajax演示：这对我来说很好，但我不得不删除JSON.parse（）