在 Flask App 中刷新 Plotly 烛台图

Question

我正在使用 plotly 绘制烛台图。我正在从雅虎财经获取数据并且每分钟都在刷新。下面的代码生成绘图并将其保存为 HTML 格式，到目前为止我能够成功完成。

生成图的代码（文件名为get_VIP_graph_html.py）：

import pandas as pd
import plotly.offline as po
import plotly.graph_objs as go
import yfinance as yf


def get_graph():
    
    try:
        
        sid = "VIPIND.NS"
        df = yf.download(tickers=sid,interval="1m", period="1d")
        df.reset_index(inplace = True)
        df['Datetime'] = df['Datetime'].dt.tz_convert('Asia/Kolkata').dt.tz_localize(None)
        df['Datetime'] = pd.to_datetime(df['Datetime'])
        df=df.set_index('Datetime')
        df=df.tail(70)

        trace = go.Candlestick(x=df.index,open=df['Open'],high=df['High'],low=df['Low'],close=df['Close'],
                               name = 'sid')
        
        data = [trace]
        
        layout = {'title': sid}
        fig = dict(data=data, layout=layout)
        po.plot(fig, filename='templates/stock.html',auto_open=False)
        
        return True

    except:
        return False

下面是我的flask App代码（文件名为view.py）：

from flask import render_template, Flask, request
from get_VIP_graph_html import get_graph

app = Flask(__name__)

@app.route('/', methods=["POST", "GET"])
def homepage():
    
    try:
        result = get_graph() #start
        if result == True:
            return render_template("main.html")
        else:
            return render_template('main.html', sign='Chart Not Generated')
        
    except Exception as e:
        return render_template("main.html", sign=e)
    
if __name__ == '__main__':
    app.run(debug=True,port=8052)

现在是我的 main.html 模板代码。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
    <title>stock-graph</title>

<!--Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!--Bootstrap core js-->
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 </head>

<body>
 <div class="container-fluid">
    <!--Data form-->
    <h1 align="center">Candlestick Chart With Technical Analysis</h1>
    {% include 'stock.html' %}


  </div>
 </body>
<script>
setInterval(function() {
fetch('/')
},60000
);
</script>
</html>

使用 plotly plot 生成的 stock.html 已使用

嵌入到 main.html 中

{% include 'stock.html' %}

我再次对运行 view.py 使用 setInterval 函数，它通过每 1 分钟执行一次相同的操作来提取最新数据。下面的屏幕截图显示相同的内容：

但是剧情还是没有刷新。不知何故，最新的 stock.html 文件在刷新期间没有加载到 main.html。

我应该如何解决这个问题，我哪里出错了。

感谢您的时间和努力。

苏迪尔

Answer 1

使用不同的方法

不保存HTML，发送图形定义
使用 AJAX 进行更新，然后 flask 在定义的时间间隔调用
出于测试目的，已将间隔设置为低。已将 console.log() 留在原地以进行调试
重要的是 auto-conversion 的日期格式在 python 和 javascript

app.py

from get_VIP_graph import get_graph
from flask import Flask, render_template, Response, jsonify

app = Flask(__name__)

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


@app.route('/fig')
def fig():
    return jsonify(get_graph())

if __name__ == '__main__':
    app.run(debug=True, port=3000)

get_VIP_graph.py

import yfinance as yf
import pandas as pd
import plotly.graph_objects as go


def get_graph():
    sid = "VIPIND.NS"
    df = yf.download(tickers=sid, interval="1m", period="1d")
    df.reset_index(inplace=True)
    df["Datetime"] = df["Datetime"].dt.tz_convert("Asia/Kolkata").dt.tz_localize(None)
    df["Datetime"] = pd.to_datetime(df["Datetime"])
    df = df.set_index("Datetime")
    df = df.tail(70)

    # make sure everything is json serializable, plus use  ISO 8601 for dates
    trace = go.Candlestick(
        x=df.index.strftime('%Y-%m-%dT%H:%M:%SZ').tolist(),
        open=df["Open"].tolist(),
        high=df["High"].tolist(),
        low=df["Low"].tolist(),
        close=df["Close"].tolist(),
        name="sid",
    )

    data = [trace]

    layout = {"title": sid}
    fig = dict(data=data, layout=layout)

    return go.Figure(fig).to_dict()

if __name__ == '__main__':
    print(get_graph())

main.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}"> -->
    <title>stock-graph</title>

    <!--Bootstrap core CSS -->
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <!--Bootstrap core js-->
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.plot.ly/plotly-2.9.0.min.js"></script>
</head>

<body>
    <div class="container-fluid">
        <!--Data form-->
        <h1 align="center">Candlestick Chart With Technical Analysis</h1>
        <div id="graph" />


    </div>
</body>
<script>
    function apicall(url) {
        $.ajax({
            type:"GET", url:url, 
            success: (data) => { 
                console.log(data, $("#graph"));
                Plotly.newPlot( $("#graph")[0], data );
             }
        });
    }
    window.onload = function () {
        apicall("/fig");
    }

    setInterval(function() {apicall("/fig");},1000);

</script>

</html>

在 Flask App 中刷新 Plotly 烛台图

Refreshing Plotly Candlestick Plot in Flask App

javascript

html

python-3.x

flask

plotly

app.py

get_VIP_graph.py

main.html