记录一次flask+plotly 如何刷新网页进行画图

项目简介:运行Dollarbar

首先按照100万美金ETH 现货进行Kline合成,然后进行画图。当然要先拿到binance的 eth spot 1s数据,然后进行Kline合成!

class DollarBar:
    def __init__(self, mongo_url, database_name, collection_name):
        self.client = MongoClient(mongo_url)
        self.db = self.client[database_name]
        self.collection = self.db[collection_name]
        self.dollar_bars = pd.DataFrame()
        self.tail_bar = pd.DataFrame()
        self.last_processed_time = None
        self.remain_data = pd.DataFrame()
        self.finanl_bars = pd.DataFrame()
        self.threshold = 1000000  # 1 million

    def initialize_data(self):
        recent_documents = self.collection.find().sort('end_time', -1).limit(5000)
        self.init_df = pd.DataFrame(list(recent_documents)).sort_values(by='end_time')
        self.init_df['sell_amount'] = self.init_df['amount'] - self.init_df['buy_amount']
        self.init_df = self.init_df.set_index('datetime')
        self.last_processed_time = self.init_df['end_time'].iloc[-1]  #整个tick 最后一个值


    def process_data(self, data):
        aggregated_data = []
        start_index = 0
        current_amount = 0

        for i in range(len(data)):
            current_amount += data.iloc[i]['amount']
            if current_amount >= self.threshold:
                bar_data = self.create_bar(data, start_index, i, current_amount)
                aggregated_data.append(bar_data)
                start_index = i + 1
                current_amount = 0

        # Check if there's any remaining data
        remaining_data = data.iloc[start_index:] if start_index < len(data) else pd.DataFrame()
     

        return  pd.DataFrame(aggregated_data), remaining_data

    def create_bar(self, data, start_index, end_index, amount):
        return {
            'datetime': data.index[start_index],
            'open': data.iloc[start_index]['open'],
            'close': data.iloc[end_index]['close'],
            'high': data.iloc[start_index:end_index+1]['high'].max(),
            'low'
<think>嗯,用户想在Python3环境下使用FlaskPlotly实现动态绘图可视化。首先,我需要确认这两个库如何结合使用。Flask是轻量级的Web框架,而Plotly用于生成交互式图表。动态绘图可能涉及实时数据更新,所以需要考虑前后端的数据传输方式。 首先,安装必要的库,用户需要安装FlaskPlotly,可能还需要pandas处理数据。然后,搭建基本的Flask应用结构,创建路由和模板。Plotly的图表通常生成HTML或JSON,可以嵌入到Flask的模板中。 动态更新可能需要使用JavaScript,比如通过WebSocket或者定时器定期从后端获取新数据。但Plotly本身支持动态更新吗?或者是否需要使用Dash,这是基于Flask的框架,更适合交互式应用。不过用户明确提到使用FlaskPlotly,可能不想引入Dash。 可能需要在前端使用Plotly的JavaScript库,通过Ajax请求从Flask后端获取数据,然后更新图表。或者使用PlotlyPython库生成图表后,通过div嵌入到HTML中,再利用JavaScript定时刷新数据。 另外,引用中的内容提到Plotly可以保存为HTML文件,或许可以生成图表后,将其HTML内容传递给Flask模板。动态部分可能需要JavaScript定时向Flask请求新的数据,然后更新图表。 需要确保代码示例正确,比如在Flask的路由中生成Plotly图表,将其转换为JSON或HTML,再在模板中使用Plotly.react来更新。可能需要使用plotly.offline.plot生成HTML内容,然后嵌入到页面中。 还要考虑数据更新的机制,比如使用setInterval函数在前端定期调用Flask的API端点获取最新数据,并更新图表。这需要后端有一个返回最新数据的路由,比如/get_data,返回JSON格式的数据,前端再处理并更新图表。 总结步骤:安装库,创建Flask应用,设计路由生成图表,创建模板嵌入图表,添加JavaScript代码实现动态更新。需要确保各部分衔接正确,比如数据传递和前端更新逻辑。</think>在Python3环境下结合FlaskPlotly实现动态绘图可视化,可以按照以下步骤进行: ### 一、环境搭建 1. 安装依赖库: ```bash pip install flask plotly pandas ``` Plotly基于JavaScript实现交互式图表[^2],Flask提供Web服务框架[^4] ### 二、基础架构搭建 ```python # app.py from flask import Flask, render_template import plotly import pandas as pd import json app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True) ``` ### 三、动态图表实现 1. 生成Plotly图表数据 ```python def create_plot(): df = pd.DataFrame({ 'x': [1,2,3,4], 'y': [10,11,12,13] }) graphJSON = json.dumps({ 'data': [{ 'type': 'scatter', 'x': df['x'], 'y': df['y'] }], 'layout': {'title': '动态图表示例'} }, cls=plotly.utils.PlotlyJSONEncoder) return graphJSON @app.route('/plot') def plot(): return create_plot() ``` ### 四、前端交互实现 ```html <!-- templates/index.html --> <!DOCTYPE html> <html> <head> <title>动态绘图</title> <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> </head> <body> <div id="chart"></div> <script> function updateChart() { fetch('/plot') .then(response => response.json()) .then(data => { Plotly.react('chart', data.data, data.layout); }); } // 每3秒更新一次 setInterval(updateChart, 3000); updateChart(); // 初始加载 </script> </body> </html> ``` ### 五、数据动态更新 在`create_plot`函数中替换为实时数据源: ```python import random def get_live_data(): """模拟实时数据生成""" return { 'x': [random.randint(1,10) for _ in range(5)], 'y': [random.randint(10,20) for _ in range(5)] } def create_plot(): data = get_live_data() # 获取实时数据 # 保持相同图表生成逻辑... ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值