首页 > 解决方案 > 散景图未在 Flask 中显示

问题描述

问题:我用 Flask 实现的散景图没有显示在我的浏览器中。当我运行该应用程序时,Bokeh 框架(带有工具)以及 x 轴标签会显示出来,但内部没有绘制任何数据。

已经尝试过:我已确保 HTML 文件中提到的 Bokeh 版本与其他人建议的一样。我很确定我已经用尽了已经提出的 SO 解决方案。我在整个程序中使用了打印语句,并确定数据实际上是使用组件模块收集、清理和处理并传递给“脚本”的。因此,据我所知,代码似乎停留在“最后一个 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 文件。

索引.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>

绘图.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>

我希望情节是可见的,但事实并非如此。控制台中不显示任何错误消息。

标签: htmlpython-3.xflask

解决方案


检查这篇文章:

将多个散景 HTML 图嵌入烧瓶

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


推荐阅读