Кажется, что странная проблема с приложением django -da sh, которое мы создали для построения данных временных рядов. Панель инструментов использует данные предварительно обработанного фрейма данных, которые сохраняются в файл, чтобы показать интерактивные графики, где пользователь может выбрать диапазон из dcc.DatePickerRange()
, чтобы получить данные в указанном поле. Тем не менее, предел даты окончания для первых графиков не выглядит кликабельным, как если бы он был частью фона, тогда как дата начала работает просто отлично.
Это проблема приложения Django или ошибка plotly-da sh?
Приложение в порядке, так как мы протестировали его отдельно, используя plotly-da * 1023 Приложение *, но его размещение в виде приложения django с использованием django -da sh представляет собой целый ряд новых проблем, включая тег html.H1
, не работающий в разделе макета.
Код для приложения django -da sh выглядит следующим образом:
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
Любое руководство очень ценится.