使用Flask & Plotly 做股票k线图交互式可视化处理（三）

要想做到可交互、多图集成显示，dash是一个不错的选择，但是我这回不用dash，我这回用plotly的js，不过我么有js不是很溜，也是慢慢摸索。。

主要策略就是，在网页通过js做可视化，search获得代码，mysql中查找处理后，通过jinja传递给js

网页中添加js可视化部分

在main.html body底部添加js部分，具体应用看这里https://plot.ly/javascript/candlestick-charts/：

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
      <!--数据传输-->
      var data = eval('{{data|safe}}');
      var stock_name = '{{stock_name|safe}}';

      var trace = {
        x: data[0],
        close: data[1],
        high: data[2],
        low: data[3],
        open: data[4],

        // cutomise colors
        increasing: {line: {color: 'red'}},
        decreasing: {line: {color: 'green'}},

        type: 'candlestick',
        xaxis: 'x',
        yaxis: 'y'
      };

      var data = [trace];

      var layout = {
        dragmode: 'zoom',
        showlegend: false,
        xaxis: {
          autorange: true,
          title: stock_name,
           rangeselector: {
              x: 0,
              y: 1.2,
              xanchor: 'left',
              font: {size:10},
              buttons: [{
                  step: 'month',
                  stepmode: 'backward',
                  count: 1,
                  label: '1 month'
              }, {
                  step: 'month',
                  stepmode: 'backward',
                  count: 6,
                  label: '6 months'
              }, {
                  step: 'all',
                  label: 'All dates'
              }]
            }
        },
        yaxis: {
          autorange: true,
        }
      };

      Plotly.plot('myDiv', data, layout);
    </script>

在html中添加关联部分：

<div class="row justify-content-center">
   <div class="col-10">     
      <div id="myDiv" style="height: 600px"></div>
   </div>
 </div>![这里写图片描述](https://img-blog.csdn.net/20180913183953781?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RvbnlkejA1MjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

这里要写一个获取数据的脚本，也很简单：

from sqlalchemy import create_engine
from sqlalchemy.ext.declarative import declarative_base
import pandas as pd


def get_stock_data(search):
    try:
        # 创建基础类
        engine = create_engine('mysql+pymysql://ffzs:666@localhost:3306/stock')
        BaseModel = declarative_base()
        # 初始话数据库记过，与数据库连接
        BaseModel.metadata.create_all(engine)
        # 实例化一个会话，之后通过session进行操作
        con = engine.connect()
        df_stock_name = pd.read_sql("select 名称 from `股票代码` where 代码={}".format(search), con=con)
        stock_name = df_stock_name.values[0][0]
        df = pd.read_sql('select *  from `{}`'.format(stock_name), con=con)
        # 不需要成交量 删除掉
        df.drop(columns=['成交量'], inplace=True)
        df['日期'] = df['日期'].astype('str')
        data = df.T.values.tolist()
        con.close()
        return data, stock_name
    except:
        return False, False

view.py 也要做更改：

from flask import render_template, Flask, request, redirect
from stockapp.get_data import get_stock_data
import json

app = Flask(__name__)
# 接收方式为post和get
@app.route('/', methods=["POST", "GET"])
def homepage():
    try:
        if request.method == 'POST':        #接收post数据
            search = request.form['search']         # 获取name为search的表单数据
            data, stock_name = get_stock_data(search)        #
            if data:
                return render_template("main.html", data=json.dumps(data), stock_name=stock_name)  # 将数据传递给网页
            else:
                return render_template('main.html', sign='没有查到该股票')
        else:
            return render_template('main.html')
    except Exception as e:
        return render_template("main.html", sign=e)

这样就将一切修改完成，运行run.py文件，搜索一个股票代码：
这里写图片描述

结果如下：
这里写图片描述

随后我又在下面加了一个表，最终结果如下：

这里写图片描述

代码就不贴了，直接去github上看吧，地址在这：https://github.com/ffzs/stockapp。。
下一篇写一下flask的若干种部署方法。。。。。

使用Flask & Plotly 做股票k线图交互式可视化处理（三）

网页中添加js可视化部分

猜你喜欢