Question

我们的目标

我们正在使用dash / plotly在Django应用中创建时间序列图。从熊猫数据框中读取正在绘制的数据，该数据首先进行预处理并写入文件，然后通过对交互式仪表板的POST请求发送到下一页。在更新数据框时，应在仪表板上绘制新图。

问题

即使数据已更改，仪表板也不会更新。它仍然显示文件中保存的上一个数据框的图。除非重启django服务器，否则它不会更新。 dcc.interval()不能解决问题，即使您可以在控制台日志中看到破折号应用程序的回复，也需要重新启动服务器，并且它删除了图形的放大功能，因为它刷新了绘图。 正在使用的Django版本是2.2.9

这是django-dash应用程序代码：

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output,State
import plotly.graph_objs as go
from django_plotly_dash import DjangoDash
import pandas as pd
import dash_table 
from datetime import datetime



app = DjangoDash('chalao')
selected_df=pd.read_pickle(r'static/selected_df.pkl')
actual_df=pd.read_pickle(r'static/actual_prediction.pkl')
datatable_df=actual_df
datatable_df.reset_index(inplace=True)
datatable_df['START_DATETIME'] = datatable_df['START_DATETIME'].astype(str)
datatable_df['Transaction'] = datatable_df['Transaction'].round(decimals=-3)
datatable_df['Prediction'] = datatable_df['Prediction'] + 500
datatable_df['Prediction'] = datatable_df['Prediction'].round(decimals=-3)
datatable_df['START_DATETIME'] = datatable_df['START_DATETIME'].map(lambda x: x.lstrip('T00:00:00'))
app.layout = html.Div([
    html.H1('Stock Ticker Dashboard'),
    html.H1('Transaction Dashboard'),
    html.Div([
        html.H3('Select start and end dates:'),
        dcc.DatePickerRange(
            id='my_date_picker2',
            min_date_allowed=selected_df.index.min(),
            max_date_allowed=selected_df.index.max(),
            start_date=selected_df.index.min(),
            end_date=selected_df.index.max()
        )
    ], style={'display':'inline-block'}),
 dcc.Graph(
        id='my_graph2',
        figure={
            'data': [
                {'x': selected_df.index, 'y': selected_df.Transaction,'name':'Transaction'},
            ],
            'layout': go.Layout(title='Actual Transaction Graph')
        }
    ),
    html.Div([
        html.H3('Select start and end dates:'),
        dcc.DatePickerRange(
            id='my_date_picker',
            min_date_allowed=actual_df.index.min(),
            max_date_allowed=actual_df.index.max(),
            start_date=actual_df.index.min(),
            end_date=actual_df.index.max()
        )
    ], style={'display':'inline-block'}),
    dcc.Graph(
        id='my_graph',
        figure={
            'data': [
                {'x': actual_df.index, 'y': actual_df.Transaction,'name':'Transaction'},
                {'x': actual_df.index, 'y': actual_df.Prediction,'name':'Prediction'}
            ],
            'layout': go.Layout(title='Predicted Graph')
        }
    ),

    dash_table.DataTable(
    id='table',

    columns=[{"name": i, "id": i} for i in datatable_df.columns],
    data=datatable_df.to_dict('records'),
    sort_action='native',
    filter_action='native',
    export_format='csv',


    style_cell={'textAlign': 'center', 'font-size' : '16px','width': '10px',
        'overflow': 'hidden'
},


    style_data_conditional=[
        {
            'if': {'row_index': 'odd'},
            'backgroundColor': 'rgb(248, 248, 248)'
        }
    ],
    style_header={
        'backgroundColor': 'rgb(230, 230, 230)',
        'fontWeight': 'bold',
        'font-size' : '20px'
    }

)

])   
def update_graph(start_date, end_date):
    start = datetime.strptime(start_date[:10], '%Y-%m-%d')
    end = datetime.strptime(end_date[:10], '%Y-%m-%d')
    updated_df=actual_df
    updated_df=updated_df[start:end]
    fig = {
        'data': [
                {'x': updated_df.index, 'y': updated_df.Transaction,'name':'Transaction'},
                {'x': updated_df.index, 'y': updated_df.Prediction,'name':'Prediction'}
            ],
        'layout': {'title': 'Prediction Graph'}
    }
    return fig

@app.callback(
    Output('my_graph2', 'figure'),
    [Input('my_date_picker2', 'start_date'),
    Input('my_date_picker2', 'end_date')]
)    

def update_graph2(start_date, end_date):
    start = datetime.strptime(start_date[:10], '%Y-%m-%d')
    end = datetime.strptime(end_date[:10], '%Y-%m-%d')
    updated_df=selected_df
    updated_df=updated_df[start:end]
    fig = {
        'data': [
                {'x': updated_df.index, 'y': updated_df.Transaction,'name':'Transaction'}
            ],
        'layout': {'title': 'Actual Transaction Graph'}
    }
    return fig

这是在Django html模板中的调用方式：

<div class="container-fluid">
{% load plotly_dash %}
    <h1>Home Page</h1>
    <div class="{% plotly_class name='chalao' %}" style="height: 100%; width: 100%;">
        {% plotly_app name='chalao' ratio=0.45 %}
    </div>
    <br>
    {{ plot1 | safe }}
</div>

任何建议和/或解决方案都非常感谢。

在Django应用中使用新的数据框数据更新django-dash仪表板

0 个答案: