Python 将多个bokeh图表集成到Django中_Python_Html_Css_Django_Bokeh

Python 将多个bokeh图表集成到Django中

python html css django

Python 将多个bokeh图表集成到Django中,python,html,css,django,bokeh,Python,Html,Css,Django,Bokeh,基本上，我希望在Django项目文件体系结构中发布多个堆叠在一起的图表我将生成多个图表，这些图表需要在同一页面上相互发布我希望还包括一个仍然与其他图表交互的选择栏我有以下第一个_dashboard.py： import numpy as np from bokeh.io import show from bokeh.layouts import column, gridplot from bokeh.models import ColumnDataSource, RangeTool fr

基本上，我希望在Django项目文件体系结构中发布多个堆叠在一起的图表

我将生成多个图表，这些图表需要在同一页面上相互发布

我希望还包括一个仍然与其他图表交互的选择栏

我有以下第一个_dashboard.py：

import numpy as np

from bokeh.io import show
from bokeh.layouts import column, gridplot
from bokeh.models import ColumnDataSource, RangeTool
from bokeh.plotting import figure
from bokeh.sampledata.stocks import AAPL


class RandomCharts():
    def __init__(self):
        pass

    def make_plots(self):
        dates = np.array(AAPL['date'], dtype=np.datetime64)
        source = ColumnDataSource(data=dict(date=dates, close=AAPL['adj_close']))

        p = figure(plot_height=300, plot_width=800, tools="xpan", toolbar_location=None,
                   x_axis_type="datetime", x_axis_location="above",
                   background_fill_color="#efefef", x_range=(dates[1500], dates[2500]))

        p.line('date', 'close', source=source)
        p.yaxis.axis_label = 'Price'

        select = figure(title="Drag the middle and edges of the selection box to change the range above",
                        plot_height=130, plot_width=800, y_range=p.y_range,
                        x_axis_type="datetime", y_axis_type=None,
                        tools="", toolbar_location=None, background_fill_color="#efefef")

        range_tool = RangeTool(x_range=p.x_range)
        range_tool.overlay.fill_color = "navy"
        range_tool.overlay.fill_alpha = 0.2

        select.line('date', 'close', source=source)
        select.ygrid.grid_line_color = None
        select.add_tools(range_tool)
        select.toolbar.active_multi = range_tool

        plots = {'Plot1':p, 'Plot2':p, 'Select1':select}
        return plots

以及以下观点：

from django.shortcuts import render
from bokeh.plotting import figure, output_file, show
from bokeh.embed import components
from bokeh.sampledata.iris import flowers

from bokeh_example.first_dashboard import RandomCharts

# Create your views here.
def homepage(request):
    dashboard = RandomCharts()
    script, div = components(dashboard.make_plots())
    div1 = div['Plot1']
    div2 = div['Plot2']
    div3 = div['Select1']

    return render(request, 'pages/base.html', locals())

在努力创建上述html的过程中。到目前为止，我只有这些：

<!DOCTYPE html>
<html lang='en'>
  <head>
    <link href='http://cdn.pydata.org/bokeh/release/bokeh-2.1.1.min.css' rel='stylesheet' type='text/css'>
    <link href='http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.1.1.min.css' rel='stylesheet' type='text/css'>

    <script src='http://cdn.pydata.org/bokeh/release/bokeh-2.1.1.min.js'></script>
    <script src='http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.1.1.min.js'></script>
    {{ script | safe }}
    <title> Hello Medium! </title>

  </head>

  <body>
    {{ div1 | safe }}
    {{ div2 | safe }}
    {{ div3 | safe }}
  </body>
</html>


{{script | safe}}
你好，中号！
{{div1 | safe}}
{{div2 | safe}}
{{div3 | safe}}

但是，它会生成以下错误：