如何使用bokeh在Django模板中显示图?

时间:2019-02-22 11:26:36

标签: python django django-templates bokeh

我想显示一个简单的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.pydata.org/bokeh/dev/bokeh-1.0.4.min.css" rel="stylesheet" type="text/css">
<script src="http://cdn.pydata.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页面没有显示任何情节

1 个答案:

答案 0 :(得分:0)

尝试颠倒顺序:首先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>