Question

问题：使用Flask实现的Bokeh图未显示在浏览器中。当我运行该应用程序时，会显示Bokeh框架（带有工具）以及x轴标签，但内部未绘制任何数据。

已经尝试：我确保HTML文件中提到的Bokeh版本与其他人建议的一样。我敢肯定，我已经用尽了已经提出的SO解决方案。我在整个程序中都使用了print语句，并确定该数据实际上是由components模块收集，清理和处理的，并传递给了'script'。因此，据我所知，代码似乎卡在了“最后的render_template行？”

    from flask import Flask, render_template, request, redirect, session
    import pandas as pd
    import quandl
    from bokeh.plotting import figure, output_file, save
    from bokeh.embed import components
    from bokeh.io import show

    app = Flask(__name__) #create an instance of the flask class (named 'app') in the current file

    app.vars={} 

    @app.route('/')
    def main():
        return redirect('/index')

    @app.route('/index', methods=['GET'])
    def index():
        return render_template('index.html')

    @app.route('/plot', methods=['POST']) 
    def plot():
        app.vars['current_symbol'] = request.form['current_symbol'] 
        quandl.ApiConfig.api_key = 'CD38JS9JqAdmdeio9JPW'
        req_data = quandl.get_table('WIKI/PRICES',  ticker=app.vars['current_symbol'], qopts = {'columns':['ticker', 'date', 'adj_close']}, date = {'gte': '2017-11-01', 'lte': '2017-12-01'}, paginate = True)
        req_data.adj_close = round(req_data.adj_close, 2)  
        req_data = req_data.set_index('date')              
        cleaned_data = req_data.pivot(columns = 'ticker')  

        # Plot the data
        p = figure(x_axis_type='datetime', x_axis_label='Date', y_minor_ticks=2, plot_width = 800, plot_height = 600)
        p.line(x = cleaned_data.index, y = cleaned_data.adj_close, line_width = 2)
        script, div = components(p)                                  
        return render_template('plot.html', script=script, div=div)  

    if __name__ == "__main__":                                      
        app.run(debug=True)

以下是随附的HTML文件。

index.html

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Stock Plotter</title>
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-1.2.0.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.2.0.min.js"></script>
        <!-- <link rel="icon" href="favicon.ico"> -->
        <title>Stock Plotter</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    </head>
    <body>
        <div class=metanav>
        <h1>Stock Plotter</h1>
        <div>
            <form id="tickerform" action="/plot" method="POST">
                Ticker Symbol: <input type="text" name="current_symbol" placeholder="ticker symbol"></input> <!--Create a dropdown list with the following options=-->
                <div>
                    <input type="submit" value="Submit"></input> <!--Create the submit button-->
                </div>
            </form>
        </div>
    {{ script|safe }} <!--Marks the js scrips as safe for the web-->
    {{ div|safe }}

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

plot.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://cdn.bokeh.org/bokeh/release/bokeh-1.2.0.min.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.bokeh**strong text**.org/bokeh/release/bokeh-1.2.0.min.js"></script>
        <title>Stock Plotter</title>
    </head>
    <body>
        <div class=page>
            <h1>Stock Plotter</h1>
            {{ script|safe }}
            {{ div|safe }}
        </div>
    </body>
</html>

我希望该图可见，但事实并非如此。控制台中未显示任何错误消息。

Answer 1

查看这篇文章：

<块引用>

Embedding multiple bokeh HTML plots into flask

它有一个很好的例子，说明如何在 Flask 应用程序中显示散景图。

Answer 2

对于任何寻求答案的人来说，这段代码的问题是，绘图定义（p.line ...）在我明确定义x和y值时存在一些问题。一旦使用了source参数，该图就会按需要显示。

散景图未在Flask中显示

2 个答案: