반응형 그래프와 티스토리에 붙이기

반응형 그래프(차트)는 정적인 그래프가 아닌, 줌인/줌아웃이 가능하고, 그래프상의 데이터에 대한 정보를 호버링 기능을 통하여 파악할 수 있는 등 유저의 행위에 반응하여 움직이는 동적인 그래프를 말합니다.

 

바로 아래와 같은 차트인데요, 캔들 차트상의 각 봉에 마우스를 올려놓으면 관련 데이터를 보여주고 줌인/줌아웃 등 간단한 기능을 적용할 수 있죠.

마침 python에서 반응형 그래프를 그릴 수  있다고 하니, 한번 알아보겠습니다.

 

 

Python Code

위의 예제를 그리는 코드를 소개합니다.

 

import pandas as pd
import numpy as np
import yfinance
from mpl_finance import candlestick_ohlc
import mplfinance
import matplotlib.dates as mpl_dates
import matplotlib.pyplot as plt
import datetime
from dateutil.relativedelta import relativedelta
import FinanceDataReader as fdr
from matplotlib import gridspec

import plotly.graph_objs as go
from plotly.subplots import make_subplots

import chart_studio
import chart_studio.plotly as py
import chart_studio.tools as tls


def stock_shart_by_Plotly():
    end_date = datetime.datetime.today()
    start_date = end_date - relativedelta(years=1)

    stk_code = '005930'
    df = load_data(stk_code, start_date, end_date)
    df['Date'] = df.index
    df['Ma20'] = df.Close.rolling(20).mean()

    fig = make_subplots(rows=2, cols=1, shared_xaxes=True)

    candle = go.Candlestick(x=df.index, open=df.Open, high=df.High, low=df.Low, close=df.Close,
                            increasing_line_color='red', decreasing_line_color='blue',
                            name='Stock Chart', )

    ma20 = go.Scatter(x=df.index, y=df.Ma20, line=dict(color='tomato'), name='ma20')
    volumne_bar = go.Bar(x=df.index, y=df.Volume, name='Volume')

    fig.add_trace(candle, row=1, col=1)
    fig.add_trace(volumne_bar, row=2, col=1)
    fig.add_trace(ma20, row=1, col=1)
    fig.update(layout_xaxis_rangeslider_visible=False)
    fig.show()

    user_name ='USERNAME'
    api_key ='api_key'
    chart_studio.tools.set_credentials_file(username=user_name, api_key=api_key)

    py.plot(fig, filename='kjy01', auto_open=True)

 

 

간단히 살펴보도록 하겠습니다.

import plotly.graph_objs as go             # 반응형 그래프 작성 object모음집의 개념
from plotly.subplots import make_subplots  # 한 화면에 여러 그래프를 그리기 위함

반응형 그래프를 그리기 위해 plotly 라는 graphing libarary가 필요합니다. 설치한 후 위에처럼 import 해주면 됩니다. plotly에 대한 보다 자세한 설명은 튜토리얼을 참고하시기 바랍니다.

 

---

import chart_studio            # chart studio라는 차트 모음 사이트
import chart_studio.plotly as py
import chart_studio.tools as tls

해당 라이브러리들은 plotly로 그린 그래프를 손쉽게 티스토리 등 웹사이트에서 불러올 수 있게 Chart Studio 라는 사이트와 연동하는 것을 도와주는 라이브러리들입니다.

 

plotly로 작성한 반응형 그래프를 티스토리로 불러오는 방법은 여기를 참고하시기 바랍니다. 정리를 잘해놓으셨습니다.

 

 

---

그려보고 싶은 데이터는 삼성전자(005930) 1년 시계열의

○ 캔들 차트

○ 20일 이평선

○ 거래량 바차트

입니다.

def stock_shart_by_Plotly():
    end_date = datetime.datetime.today()             # 조회 종료일
    start_date = end_date - relativedelta(years=1)   # 조회 시작일

    stk_code = '005930'    # 삼성전자
    df = load_data(stk_code, start_date, end_date)  # date, ohlc, volume data load
    df['Date'] = df.index
    df['Ma20'] = df.Close.rolling(20).mean()        # 20일 이평선도 그린다.

    fig = make_subplots(rows=2, cols=1, shared_xaxes=True)   #plotly에서 subplot 사용법

    candle = go.Candlestick(x=df.index, open=df.Open, high=df.High, low=df.Low, close=df.Close,
                            increasing_line_color='red', decreasing_line_color='blue',
                            name='Stock Chart', )     #plotly의 candle chart 생성법

    ma20 = go.Scatter(x=df.index, y=df.Ma20, line=dict(color='tomato'), name='ma20')
                                                      # 20일 이평선 생성법 scatter함수
    volumne_bar = go.Bar(x=df.index, y=df.Volume, name='Volume') # Volume bar chart 생성법

    fig.add_trace(candle, row=1, col=1)       # r,c =1,1인 액자(ax)에 candle 첨부
    fig.add_trace(volumne_bar, row=2, col=1)  # r,c =2,1인 액자에 거래 var chart 첨부
    fig.add_trace(ma20, row=1, col=1)
    fig.update(layout_xaxis_rangeslider_visible=False)  # rangeslider 기능 off
    fig.show()

    user_name ='USERNAME'   # chart studio의 내 아이디(예: USERNAME) 
    api_key ='api_key'      # chart studio의 내 api key (예: apu key)
    chart_studio.tools.set_credentials_file(username=user_name, api_key=api_key)

    py.plot(fig, filename='graph01', auto_open=True)  # chart studio 사이트에 위에서 만든 그래프를 upload해줌(이름 graph01)

 

 

이후 나머지 과정은 위에서 말씀드린 블로그를 참고하여 해당 차트에 맞는 iframe일 티스토리의 html에 복사하여 붙여 넣어 사용할 수 있습니다.