Project8： CandlestickChart+embed in Web

利用bokeh搭建的HTML图片——candlestckchart的代码

import requests
from pandas_datareader import data
import datetime
from bokeh.plotting import figure,show,output_file
from bokeh.embed import components  #embed
from bokeh.resources import CDN  #content delivery network      得到link

start=datetime.datetime(2020,4,1)
end=datetime.datetime(2020,6,10)
df=data.DataReader(name="AAPL",data_source="yahoo",start=start,end=end)      #从雅虎找apple  #传入datetime type
#存入df


def inc_dec(c,o):         #判断状态
    if c > o: 
        value="Increase"
    elif c<o:
        value="Decrease"
    else:
        value="Equal"
    return value

df["Status"]=[inc_dec(c,o) for c,o in zip(df.Close,df.Open)]      #zip得到每个close和open 传入函数得到data
df["Middle"]=(df.Open+df.Close)/2
df["Height"]=abs(df.Open-df.Close)

p = figure(x_axis_type='datetime',width=1000,height=450,sizing_mode="scale_width")
p.title.text="Candlestick Chart"
#得到一个空figure
p.title.align="center"
p.title.text_font_size="45px"
#透明度
p.grid.grid_line_alpha=0.3          #grid_line的透明度

p.segment(df.index,df.High,df.index,df.Low,color="black")          #x 最高 y最高 x最低 y最低
#rectangle 12hours gap  quadrants
hours_12=12*60*60*1000
#涨 绿
#对每一个参数，都要传入filter——df.Status=="Increase"
p.rect(df.index[df.Status=="Increase"],df.Middle[df.Status=="Increase"],
       hours_12,df.Height[df.Status=="Increase"],fill_color="#CCFFFF",line_color="black")      #4个参数  x,y,width,height  #rect 直接在中间

#跌 红
p.rect(df.index[df.Status=="Decrease"],df.Middle[df.Status=="Decrease"],
       hours_12,df.Height[df.Status=="Decrease"],fill_color="#FF3333",line_color="black")

#x轴为时间  y轴最高+最低
#在rect后面话segment  不然会被覆盖

#components(p)  #传入figure          #得到一个tuple——js的源码

script1,div1,=components(p)  #得到script和div  为str
cdn_js=CDN.js_files          #list of 3links
#cdn_css=CDN.css_files       #无法得到css 故删除

# output_file("CS.html")
# show(p)

进行flask——web配置

pip install virtualenv  #下载virtual包
python -m venv virtual  #建立virtual文件——可用 py -3 -m venv virtual
virtual/Scripts/python -m pip install --upgrade pip #更新virtual中的pip
virtual/Scripts/pip install flask  #为virtual下载flask
virtual/Scripts/pip install bokeh
virtual/Scripts/pip install pandas
virtual/Scripts/pip install pandas_datareader

添加HTML文件，放入该网页的link

plot.html

{%extends "layout.html"%}
{%block content%}
<script type="text/javascript" src={{cdn_js | safe}} crossorigin="anonymous"></script>
<div class="plot">
    <h1>My Stock anlysis</h1>
    <p></p>
    <strong></strong>
    <br></br>
</div>

{{script1 | safe}}
{{div1 | safe}}
{%endblock%}

script1,py

将script，div，link全部传入HTML；

# -*- coding: utf-8 -*-


from flask import Flask,render_template

app = Flask(__name__)

@app.route('/plot/')
def plot():
    import requests
    from pandas_datareader import data
    import datetime
    from bokeh.plotting import figure,show,output_file
    from bokeh.embed import components  #embed
    from bokeh.resources import CDN  #content delivery network      得到link

    start=datetime.datetime(2020,4,1)
    end=datetime.datetime(2020,6,10)
    df=data.DataReader(name="AAPL",data_source="yahoo",start=start,end=end)      #从雅虎找apple  #传入datetime type
    def inc_dec(c,o):         #判断状态
        if c > o: 
            value="Increase"
        elif c<o:
            value="Decrease"
        else:
            value="Equal"
        return value

    df["Status"]=[inc_dec(c,o) for c,o in zip(df.Close,df.Open)]      #zip得到每个close和open 传入函数得到data
    df["Middle"]=(df.Open+df.Close)/2
    df["Height"]=abs(df.Open-df.Close)

    p = figure(x_axis_type='datetime',width=1000,height=450,sizing_mode="scale_width")
    p.title.text="Candlestick Chart"#得到一个空figure
    p.title.align="center"
    p.title.text_font_size="45px"#透明度
    p.grid.grid_line_alpha=0.3          #grid_line的透明度

    p.segment(df.index,df.High,df.index,df.Low,color="black")          #x 最高 y最高 x最低 y最低
    #rectangle 12hours gap  quadrants
    hours_12=12*60*60*1000
    #涨 绿 
    # #对每一个参数，都要传入filter——df.Status=="Increase"
    p.rect(df.index[df.Status=="Increase"],df.Middle[df.Status=="Increase"],
        hours_12,df.Height[df.Status=="Increase"],fill_color="#CCFFFF",line_color="black")      #4个参数  x,y,width,height  #rect 直接在中间
    #跌 红
    p.rect(df.index[df.Status=="Decrease"],df.Middle[df.Status=="Decrease"],
        hours_12,df.Height[df.Status=="Decrease"],fill_color="#FF3333",line_color="black")

    #x轴为时间  y轴最高+最低
    #在rect后面话segment  不然会被覆盖

    #components(p)  #传入figure          #得到一个tuple——js的源码

    script1,div1,=components(p)  #得到script和div  为str
    cdn_js=CDN.js_files[0]          #list of 3links
    #传入第0个连接
    #output_file("CS.html")
    return render_template("plot.html",script1=script1,div1=div1,cdn_js=cdn_js)


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

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

layout.HTML
增加一个入口；

<!DOCTYPE html>
<html>
  <head>
        <title>Seven's HOME</title>  
        <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}"
  </head>
  <body>
    <header>
      <div class="container">
        <h1 class="logo">SEVEN'S HOME</h1>
        <strong><nav>
          <ul class="menu">
            <li><a href="{{ url_for('home') }}">Home</a></li>
            <li><a href="{{ url_for('about') }}">Visit Friend</a></li>
            <li><a href="{{ url_for('plot') }}">Stock analysis</a></li>
            <li><a href="{{ url_for('map') }}">World map</a></li>
            
          </ul>
        </nav></strong>
      </div>
    </header>
    <div class="container">
        {%block content%}
        {%endblock%}
    </div>
  </body>
</html>

传入Heroku

（1）安装gunicorn：用于服务器运行网站；

 ../virtual/Scripts/pip install gunicorn 

（2）进入script.py界面；

..\virtual\Scripts\pip freeze > requirements.txt

（3）设置procfile：

其中的app来自scripty1.py

（4）设置runtime.txt
heroku支持的python版本
查看后选择版本：

进入cmd 将git上传至heoroku

登入heroku

heroku login

创建app

heroku create name

git操作

git init
git add .
git commit -m "firstchange"
heroku git:remote --app name

改变后push

git push heroku master

自定义网站域名

heroku domain:add

定义域名