Dash와 Plotly를 사용한 라이브 그래프
Python은 머신 러닝, 웹 개발, 앱 개발, 게임 개발, 데이터 과학 등과 같은 다양한 컴퓨터 과학 영역에서 사용되는 동적 형식의 범용 프로그래밍 언어입니다. Python을 구축하는 열정적인 소프트웨어 엔지니어와 개발자로 구성된 거대한 커뮤니티의 지원을 받습니다. 다양한 API 및 라이브러리 생성.
이러한 라이브러리 중 하나는 Dash입니다. Dash는 Flask, Plotly 및 ReactJS를 기반으로 구축된 프레임워크입니다.
Dash는 Python 프로그래밍 언어로 대화형 대시보드를 만드는 데 사용됩니다.
라이브 그래프 또는 실시간 그래프는 짧은 시간 간격으로 매우 자주 변경되는 그래프 유형입니다. 이러한 그래프를 통합하는 응용 프로그램은 때때로 페이지를 새로 고침(다시 로드)할 수 있을 뿐입니다. 엄청난 양의 데이터를 반복적으로 로드하는 것은 서버와 클라이언트 시스템에 너무 비싸고 무겁기 때문에 일부 새로운 데이터가 수신됩니다.
또한 응용 프로그램이 느려지고 작동하기 어려워집니다. 주식형 차트는 그러한 그래프의 가장 좋은 예입니다.
이러한 상황에서 응용 프로그램의 상태를 조정하지 않고 수정된 데이터를 새로 고치는 기술, 즉 핫 로딩이 사용됩니다. 핫 로딩은 데이터가 변경될 때 전체 애플리케이션을 새로 고치는(다시 로드) 것을 의미하는 실시간 다시 로드와 다릅니다.
이 기사에서는 대시를 사용하여 간단한 예제를 통해 라이브 그래프를 만드는 방법을 배웁니다.
Dash와 Plotly를 사용한 라이브 그래프
개발 프로세스와 이해를 더 쉽게 하기 위해 전체 절차를 더 간단한 비트로 나눌 것입니다.
종속성 설치
먼저 dash와 plotly라는 두 가지 종속성을 설치해야 합니다. 다음 pip 명령을 사용하여 설치하십시오.
다음 단계를 진행하기 전에 가상 환경을 만드는 것이 좋습니다.
pip install dash
pip install plotly
수입품
이제 main.py라는 새 파일을 만들고 앞서 이야기한 모든 내용을 해당 파일에 추가합니다. 이 간단한 응용 프로그램을 만드는 데 하나의 파일만 필요합니다.
dash, random(임의 값 생성용), plotly, plotly.graph_objs(그래프 기능), dash_core_components(그래프), dash_html_components(HTML 구성 요소), Input 및 Output 콜백용.
import dash
import random
import plotly
import plotly.graph_objs as go # graph features
import dash_core_components as dcc # graphs
import dash_html_components as html # html components
from dash.dependencies import Output, Input # callbacks
애플리케이션 및 데이터 초기화
그래프에 표시될 x 및 y 좌표를 저장하기 위해 Dash 애플리케이션과 두 개의 deque 데이터 구조를 초기화합니다. 동일한 내용은 다음 Python 코드를 참조하십시오.
app = dash.Dash(__name__)
xData = [1]
yData = [1]
대시보드 레이아웃
대시보드 레이아웃을 만들기 위해 Dash의 HTML 구성 요소를 사용합니다.
app.layout = html.Div(
[
dcc.Graph(
id="live-graph", animate=True # enable smooth transition upon updation
),
dcc.Interval(
id="live-graph-interval",
interval=1000, # time, in ms, elapsed between two consecutive values
n_intervals=0, # number of intervals completed from the start of the server
),
]
)
새로운 데이터 포인트가 그래프에 추가될 때 부드러운 전환이 필요하기 때문에 animate를 True로 설정했습니다. False로 설정하면 그래프가 갑자기 업데이트되어 사용자 경험을 방해할 수 있습니다.
실시간 그래프 업데이트
@app.callback(
Output("live-graph", "figure"), [Input("live-graph-interval", "n_intervals")]
)
def updateGraph(n):
xx = xData[-1] + 1
yy = yData[-1] + (yData[-1] * random.uniform(-0.5, 0.5))
if yy == 0:
yy = 1
xData.append(xx)
yData.append(yy)
data = plotly.graph_objs.Scatter(
x=list(xData), y=list(yData), name="Scatter", mode="lines+markers"
)
return {
"data": [data],
"layout": go.Layout(
xaxis=dict(range=[min(xData), max(xData)]),
yaxis=dict(range=[min(yData), max(yData)]),
),
}
서버 실행
대시 애플리케이션에서 사용 가능한 run_server()를 호출하여 서버를 실행하십시오.
if __name__ == "__main__":
app.run_server()
출력으로 소스 코드 완성
다음은 출력과 함께 전체 소스 코드입니다. python main.py를 사용하여 스크립트를 실행하면 URL이 출력으로 나타납니다.
웹 브라우저에서 해당 URL을 열어 애플리케이션에 액세스합니다.
import dash
import random
import plotly
import plotly.graph_objs as go # graph features
import dash_core_components as dcc # graphs
import dash_html_components as html # html components
from dash.dependencies import Output, Input # callbacks
app = dash.Dash(__name__)
xData = [1]
yData = [1]
app.layout = html.Div(
[
dcc.Graph(
id="live-graph", animate=True # enable smooth transition upon updation
),
dcc.Interval(
id="live-graph-interval",
interval=1000, # time, in ms, elapsed between two consecutive values
n_intervals=0, # number of intervals completed from the start of the server
),
]
)
@app.callback(
Output("live-graph", "figure"), [Input("live-graph-interval", "n_intervals")]
)
def updateGraph(n):
xx = xData[-1] + 1
yy = yData[-1] + (yData[-1] * random.uniform(-0.5, 0.5))
if yy == 0:
yy = 1
xData.append(xx)
yData.append(yy)
data = plotly.graph_objs.Scatter(
x=list(xData), y=list(yData), name="Scatter", mode="lines+markers"
)
return {
"data": [data],
"layout": go.Layout(
xaxis=dict(range=[min(xData), max(xData)]),
yaxis=dict(range=[min(yData), max(yData)]),
),
}
if __name__ == "__main__":
app.run_server()
출력:
Vaibhav is an artificial intelligence and cloud computing stan. He likes to build end-to-end full-stack web and mobile applications. Besides computer science and technology, he loves playing cricket and badminton, going on bike rides, and doodling.