如何使用散景在 django 模板中显示绘图？答案

【问题标题】：How to display plots in django templates,using bokeh?如何使用散景在 django 模板中显示绘图？
【发布时间】：2019-07-16 11:42:30
【问题描述】：

我想显示一个简单的绘图 django 模板，但它显示的是空白页这是我的代码： views.py

from bokeh.io import output_file,show,output_notebook,push_notebook
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource,HoverTool,CategoricalColorMapper
from bokeh.layouts import row,column,gridplot
from bokeh.models.widgets import Tabs,Panel
from bokeh.embed import components
from bokeh.resources import CDN

def MainPage(request):
    p = figure(plot_width=800, plot_height=250, x_axis_type="datetime")
    p.line([1,2,3,4,5], [4,1,3,5,2], color='navy', alpha=0.5)
    script, div = components(p)
    return render(request,'mainpage.html',{'script':script,'div':div})

我的mainpage.html：

<!DOCTYPE html>
<html lang="en-US">

<link
    href="http://cdn.bokeh.org/bokeh/dev/bokeh-1.0.4.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/dev/bokeh-1.0.4.min.js"></script>

<body>

    <h1>Hello Bokeh!</h1>

    <p> Below is a simple plot of stock closing prices </p>

    {{ script|safe }}

    {{ div|safe }}

</body>

</html>

当我执行它时，我的 html 页面不显示任何绘图

【问题讨论】：

那些 CSS 和 JS 链接对我不起作用 - 可能是这样吗？试试看：cdn.pydata.org/bokeh/release/bokeh-1.0.4.min.css

标签： python django django-templates bokeh

【解决方案1】：

尝试颠倒顺序：首先div 然后script

views.py

from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.resources import CDN

def MainPage(request):
    p = figure(plot_width = 800, plot_height = 250, x_axis_type = "datetime")
    p.line([1, 2, 3, 4, 5], [4, 1, 3, 5, 2], color = 'navy', alpha = 0.5)
    script, div = components(p)
    return render_template(request, 'mainpage.html', {'script': script, 
                                                      'div': div, 
                                                      'resources': CDN.render() })

mainpage.html

<!DOCTYPE html>
<html lang="en-US">
<head>
    <h1>Hello Bokeh!</h1>
    <p> Below is a simple plot of stock closing prices </p>
    {{ resources }}
</head>
<body>
    {{ div }}
    {{ script }}
</body>
</html>

【讨论】：