Question

我正在使用Flask构建我的第一个Web应用程序。 Web应用程序的概念是使用Pandas和Bokeh操纵和可视化数据。所有这些都相对简单。

现在，我正在使用GMapPlot在纽约地图上绘制信息。当我使用output_file来显示图表时，我得到了预期的结果。

预期

然而，当我尝试将绘图返回到我自己的html模板时，地图是空的。

实际这是我的.py文件（为凌乱的代码道歉）。

import pandas as pd
import datetime
from flask import render_template, request
from web_app.app import app
from bokeh.io import output_file, show
from bokeh.embed import components
from bokeh.models import (
    GMapPlot, GMapOptions, ColumnDataSource, Circle, DataRange1d, PanTool, WheelZoomTool, BoxSelectTool
)

@app.route('/heatmap', methods=['GET', 'POST'])
def generate_heatmap():
    date1 = datetime.datetime.strptime(request.form['startFilter'],"%Y-%m-%d").date()
    date2 = datetime.datetime.strptime(request.form['stopFilter'], "%Y-%m-%d").date()
    date2 += datetime.timedelta(days=1)
    date_start = str(date1)
    date_stop = str(date2)

    df = pd.read_csv("...", sep=",")
    df = df.set_index(['starttime'])
    df = df.loc[date_start:date_stop]

    start_lats = pd.Series(df['start station latitude']).unique()
    stop_lats = pd.Series(df['end station latitude']).unique()
    start_long = pd.Series(df['start station longitude']).unique()
    stop_long = pd.Series(df['end station longitude']).unique()

    lats = start_lats.tolist() + stop_lats.tolist()
    long = start_long.tolist() + stop_long.tolist()

    map_options = GMapOptions(lat=40.741557, lng=-73.990467, map_type="roadmap", zoom=11)
    plot = GMapPlot(
    x_range=DataRange1d(), y_range=DataRange1d(), map_options=map_options, title="NYC"
    )
    source = ColumnDataSource(
        data=dict(
            lat=lats,
            lon=long,
        )
    )

    circle = Circle(x="lon", y="lat", size=8, fill_color="blue", fill_alpha=0.8, line_color=None)
    plot.add_glyph(source, circle)
    plot.add_tools(PanTool(), WheelZoomTool(), BoxSelectTool())
    output_file("gmap_plot.html")
    show(plot)
    script, div = components(plot)
    return render_template('heatmap.html', script = script, div = div)

和我的HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Heatmap</title>
        <link rel="stylesheet" href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.css"    type="text/css" />
        <script type="text/javascript" src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.js"></script>
        {{ script | safe }}
    </head>
        <body>
            <div class='bokeh'>
                {{ div | safe }}
            </div>
        </body>

Answer 1

我是这两种工具的初学者，但我通过以下方式将它们付诸实践：

from web_app.app import app
from flask import render_template
from bokeh.embed import file_html
from bokeh.plotting import figure
from bokeh.resources import CDN

@app.route('/example', methods=['GET'])
def example():

    plot = figure()
    plot.circle([1,2], [3,4])

    html = file_html(plot, CDN)

    return render_template('whatever.html', plot=html)

然后，在模板中使用Jinja2：

{{ plot|safe }}

Python - 使用Bokeh在Flask中嵌入gmap_plot

1 个答案: