如何将独立的 Bokeh 图表嵌入 Django 模板中。

23 浏览
0 Comments

如何将独立的 Bokeh 图表嵌入 Django 模板中。

我想通过Django框架在我的Web应用程序中使用Bokeh库提供的图形，但我不想使用Bokeh服务器可执行文件，因为这不是一个好的方式。这是否可能？如果是的话，应该怎么做？

0

3 答案

0 Comments

在使用Django模板时，我们常常需要将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响应后，首先将div添加到现有页面中，然后再添加脚本：

$("button").click(function(){
  $.ajax({
    url: "/simple_chart", 
    success: function(result){
      var bokeh_data = result;
      $('#bokeh_graph').html(bokeh_data.div);
      $("head").append(bokeh_data.script);
  }});
});

以上方法对我来说效果不错，但是我不得不删除了JSON.parse()方法。

0
0 Comments

原因：在使用Django模板时，需要将独立的Bokeh图表嵌入到模板中。但是，不知道如何嵌入，需要找到解决方法。

解决方法：有多种方法可以将Bokeh图表嵌入到Django模板中，例如生成独立的HTML文件、生成Bokeh独立组件并在渲染模板时嵌入、使用"autoloading"方法返回一个标签来替换自身的Bokeh图表。具体的使用方法可以在Bokeh的文档中找到。此外，在Bokeh的仓库中还可以找到更多的示例，可以作为参考。

0
0 Comments

在Django中嵌入独立的Bokeh图表是一个常见的需求。下面的代码展示了如何在Django模板中嵌入Bokeh图表。

首先，在`views.py`文件中，我们需要导入所需的库，并编写一个简单的绘图函数`simple_chart`。该函数创建一个Bokeh图表对象，并将其转换为HTML标签和脚本。然后，我们将这些标签和脚本传递给模板文件进行渲染。

接下来，在`urls.py`文件中，我们需要将这个绘图函数与一个URL进行关联，以便在浏览器中访问。

最后，在模板文件`simple_chart.html`中，我们将使用Bokeh的CDN链接来引入所需的JavaScript和CSS文件，并将图表的HTML标签和脚本插入到适当的位置。

这样，我们就可以在Django应用程序中嵌入独立的Bokeh图表了。

如果你遇到了`TypeError: Bokeh.safely is not a function`的错误，请参考上面给出的链接进行解决。

希望这个例子能够帮助你在Django中嵌入Bokeh图表。如果你有其他问题或建议，可以在Bokeh的文档或GitHub页面上提出。感谢你的支持！

0