Как отображать графики в шаблонах Django, используя боке? - PullRequest
Новая
       7

Как отображать графики в шаблонах Django, используя боке?

0 голосов
/ 22 февраля 2019

Я хочу отобразить простые сюжетные шаблоны 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})

моя главная страница.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 голосов
/ 29 марта 2019

Попробуйте инвертировать порядок: сначала 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>
...