Question

我正在尝试从下面的代码简单地加载/ plot /网页，但是，散景图未嵌入到网页中。注意，在较新版本的bokeh中，它不需要css文件（来自CDN_css）。使用output_file和show方法时，我可以轻松地获得一个单独的网页来生成bokeh图的html。但是，当尝试将其嵌入时，我只是从索引中获取html代码，而没有嵌入的图表。

任何帮助将不胜感激！

'''python代码：app.py'''

app = Flask(__name__)

def create_plot(ticker):
    global p
    ts = TimeSeries(key="**********", output_format='pandas')
    data, meta_data = ts.get_intraday(symbol=ticker,interval='1min', outputsize='full')
    data = data.iloc[::-1]
    #gets the #tsla data from the API and orders it in reverese (5 days from most recent entry to furthest)

    data["datetime"] = data.index #adds a datetime column of the index strings (need to convert to datetime objects)

    datetime_list = []
    for i in data["datetime"]:
        datetime_list.append(datetime.strptime(i, "%Y-%m-%d %H:%M:%S"))

    data["datetime"] = datetime_list #converts the datetime column from a str to a datetime object column

    my_data = pd.DataFrame()

    my_data["datetime"] = data["datetime"]
    my_data["stock_price"] = data["1. open"]

    last_time = my_data["datetime"][0]
    one_day_ago = last_time - relativedelta(days=1)

    daily_data = my_data[my_data["datetime"] > one_day_ago]

    #bokeh chart
    p = figure(x_axis_type="datetime",plot_width=1000, plot_height=400)

    p.sizing_mode="scale_width"
    p.title.text="# " + ticker +  " Stock Price"
    p.title.text_color="navy"
    p.title.text_font="times"
    p.title.text_font_style="bold"
    p.title.text_font_size="28pt"
    p.title.vertical_align="top"
    p.title.align="center"
    p.xaxis.minor_tick_line_color=None
    p.yaxis.minor_tick_line_color=None
    p.xaxis.axis_label="Time"
    p.yaxis.axis_label="Price USD"
    p.xaxis.axis_label_text_color="navy"
    p.yaxis.axis_label_text_color="navy"
    p.xaxis.axis_label_text_font_style="bold"
    p.yaxis.axis_label_text_font_style="bold"
    p.xaxis.axis_label_text_font="times"
    p.yaxis.axis_label_text_font="times"
    p.xaxis.axis_label_text_font_size = "16pt"
    p.yaxis.axis_label_text_font_size = "16pt"
    p.ygrid.band_fill_alpha = 0.1
    p.ygrid.band_fill_color = "navy"
    p.xgrid.grid_line_color = None


    p.line(daily_data["datetime"], daily_data["stock_price"], line_width=2, color="blue")


@app.route("/")
def home():
    return render_template("home.html")

@app.route("/plot/")
def plot():
    create_plot("TSLA")
    script1,div1 = components(p) # script_1 is the js source code, div_1 is the html source code

    cdn_js = CDN.js_files[0] #need first element of this list
    return render_template("plot.html",script1=script1, div1=div1, cdn_js=cdn_js)


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

'''home.html代码'''

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../static/css/main.css">
    <title>Daniel's #tsla chart webapp</title>
  </head>
  <body>
    <h1>Daniel's #TSLA chart webapp</h1>
    <h2>Hi, welcome to my stock market webapp which gives an analysis of #TSLA</h2>
    <p>To proceed, please press the button below</p>
    <form class="input" action="plot.html" method="post">
      Please enter your email address below to access the #TSLA market data! <br>
      <input type="submit" name="name_submission" value="submit">
    </form>
  </body>
</html>

'''plot.html代码'''

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../static/css/main.css">
    <script type="text/javascript" src={{CDN_js | safe}}></script>
    <title>Daniel's #tsla chart webapp</title>
  </head>
  <body>
    <h1>Daniel's #TSLA chart webapp</h1>
    <h2>Hi, welcome to my stock market webapp which gives an analysis of #TSLA</h2>
    {{ script1|safe }}
    {{ div1|safe }}
  </body>
</html>

散景图未嵌入html中

0 个答案: