반응형
회사에서 대시보드를 임베딩 시키는 작업을 해야해서 만들고 있는데 기존에 interval대신에 button으로 신호를 주는 방법을 알아냈다. Callback함수의 output과 input에대한 이해가 조금더 잘되어있었다면 좀더 쉽게 만들었을텐데.... 개발이란게 참 만들기는 쉬운데 그 방법이나 함수 사용법을 알아가는게 시간이 좀 걸리는것 같다.
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
from flask import Flask, request
import json
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd
# Flask 서버와 Dash 앱 생성
server = Flask(__name__)
app = dash.Dash(__name__, server=server)
# Dash 앱 레이아웃 설정
df= pd.read_csv('train.csv',index_col=0)
app.layout = html.Div([
html.Button(
'Click Me',
id='button',
n_clicks=0,
),
html.Div([
html.Div([
dcc.Graph(figure={},id='graph1')
], style={'width': '49%', 'float': 'left', 'display': 'inline-block'}, className="six columns"),
html.Div([
dcc.Graph(figure={},id='graph2')
], style={'width': '49%', 'float': 'left', 'display': 'inline-block'}, className="six columns"),
], className="row"),
html.Div([
html.Div([
dcc.Graph(figure={},id='graph3')
], style={'width': '49%', 'float': 'left', 'display': 'inline-block'}, className="six columns"),
html.Div([
dcc.Graph(figure={},id='graph4')
], style={'width': '49%', 'float': 'left', 'display': 'inline-block'}, className="six columns"),
], className="row"),
# dcc.Interval(
# id='graph-update',
# interval=1*1000, # in milliseconds
# n_intervals=0
# )
])
# app.layout = html.Div([
# dcc.Graph(id='live-graph', animate=True),
# ])
@server.route('/postdata', methods=['POST'])
def get_data():
global global_data
global_data = json.loads(request.data) # JSON 데이터 파싱
print(global_data)
return 'Success', 200
@app.callback(Output('graph1', 'figure'), Input('button', 'n_clicks'))
def update_graph_scatter(n):
# global global_data
# 그래프를 업데이트
# print(global_data)
if global_data['category'][0]=='draw1':
fig = px.scatter(df, x="대출금액",y='연간소득',color='대출목적')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
# fig.show()
return fig
elif global_data['category'][0]=='draw2':
fig = px.scatter(df, x="총상환원금",y='총상환이자',color='주택소유상태')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][0]=='draw3':
fig = px.histogram(df, x="대출금액")
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][0]=='draw4':
data2={'x':[1,2,3,4,5,6,7],'y':[7,8,6,5,4,3,2]}
fig = go.Figure(
data=[
go.Scatter(
x=data2['x'], #global_data.get('x', []),
y=data2['y'], #global_data.get('y', []),
name='Scatter',
mode='lines+markers'
)
],
layout=go.Layout(
title='figure4',
)
)
return fig
else:
pass
@app.callback(Output('graph2', 'figure'), Input('button', 'n_clicks'))
def update_graph_scatter(n):
global global_data
# 그래프를 업데이트
# print(global_data)
if global_data['category'][1]=='draw1':
fig = px.scatter(df, x="대출금액",y='연간소득',color='대출목적')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
# fig.show()
return fig
elif global_data['category'][1]=='draw2':
fig = px.scatter(df, x="총상환원금",y='총상환이자',color='주택소유상태')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][1]=='draw3':
fig = px.histogram(df, x="대출금액")
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][1]=='draw4':
data2={'x':[1,2,3,4,5,6,7],'y':[7,8,6,5,4,3,2]}
fig = go.Figure(
data=[
go.Scatter(
x=data2['x'], #global_data.get('x', []),
y=data2['y'], #global_data.get('y', []),
name='Scatter',
mode='lines+markers'
)
],
layout=go.Layout(
title='figure4',
)
)
return fig
else:
pass
@app.callback(Output('graph3', 'figure'), Input('button', 'n_clicks'))
def update_graph_scatter(n):
global global_data
# 그래프를 업데이트
# print(global_data)
if global_data['category'][2]=='draw1':
fig = px.scatter(df, x="대출금액",y='연간소득',color='대출목적')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
# fig.show()
return fig
elif global_data['category'][2]=='draw2':
fig = px.scatter(df, x="총상환원금",y='총상환이자',color='주택소유상태')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][2]=='draw3':
fig = px.histogram(df, x="대출금액")
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][2]=='draw4':
data2={'x':[1,2,3,4,5,6,7],'y':[7,8,6,5,4,3,2]}
fig = go.Figure(
data=[
go.Scatter(
x=data2['x'], #global_data.get('x', []),
y=data2['y'], #global_data.get('y', []),
name='Scatter',
mode='lines+markers'
)
],
layout=go.Layout(
title='figure4',
)
)
return fig
else:
pass
@app.callback(Output('graph4', 'figure'), Input('button', 'n_clicks')) #[Input('graph-update', 'n_intervals')]
def update_graph_scatter(n):
global global_data
# 그래프를 업데이트
# print(global_data)
if global_data['category'][3]=='draw1':
fig = px.scatter(df, x="대출금액",y='연간소득',color='대출목적')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
# fig.show()
return fig
elif global_data['category'][3]=='draw2':
fig = px.scatter(df, x="총상환원금",y='총상환이자',color='주택소유상태')
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][3]=='draw3':
fig = px.histogram(df, x="대출금액")
#show하면 내 노트북 (주피터 노트북 등)에 그래프가 나타남.
return fig
elif global_data['category'][3]=='draw4':
data2={'x':[1,2,3,4,5,6,7],'y':[7,8,6,5,4,3,2]}
fig = go.Figure(
data=[
go.Scatter(
x=data2['x'], #global_data.get('x', []),
y=data2['y'], #global_data.get('y', []),
name='Scatter',
mode='lines+markers'
)
],
layout=go.Layout(
title='figure4',
)
)
return fig
else:
pass
# data2={'x':[1,2,3,4,5,6,7],'y':[7,8,6,5,4,3,2]}
# fig = go.Figure(
# data=[
# go.Scatter(
# x=data2['x'], #global_data.get('x', []),
# y=data2['y'], #global_data.get('y', []),
# name='Scatter',
# mode='lines+markers'
# )
# ],
# layout=go.Layout(
# title='figure4',
# )
# )
# return fig
if __name__ == '__main__':
app.run_server(debug=True)
반응형
'개발' 카테고리의 다른 글
| javascript 문법 정리 (0) | 2025.02.23 |
|---|---|
| 회사 일상 - plotly 서버 연결 (0) | 2024.02.23 |
| 운영계, QA계, 개발계 3단계로 나뉘어져야 하는 이유 (0) | 2023.12.27 |