반응형
티스토리 포스팅에 반응형 주식차트를 올려보자.
파이썬의 반응형 시각화 라이브러리 인 plotly 차트를 캡쳐가 아닌 반응형으로 올리는 방법을 알아보자.
우선 내 티스토리에 plotly.js를 심어주자
아래 코드를 블로그 설정>스킨편집>html편집으로 가서 <head></head> 사이에 아래 코드를 복붙 해주자.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
Python의 Plotly로 그래프를 그리자.
import pandas as pd
import datetime as dt
import pandas_datareader.data as web
import plotly.express as px필요한 라이브러리들을 불러온다.
그리고 야후에서 제공하는 주식데이터 2년치를 불러와 본다.
# 야후 주식 데이터를 불러온다. FAMANG-T 대표주들을 불러와준다.
start = dt.datetime(2019,1,1)
end = dt.datetime.now()
tickers = ['FB', 'TSLA', 'AAPL', 'AMZN', 'NFLX', 'GOOGL']
stocks_close = pd.DataFrame(web.DataReader(tickers, 'yahoo', start, end)['Close'])
plotly로 만든 차트를 json으로 추출해주자.
import cufflinks as cf
data = stocks_close
plot = data.iplot(asFigure=True, xTitle='Date', yTitle='$')
plot.to_json()요런식으로 json으로 추출된 녀석을 복사 해주자.
주의할 점
1. 시작과 끝에 있는 ' 작은 따옴표는 제거해 준다.
2. 한글일 경우 'name:' 을 확인하고 텍스트가 바뀌어 있을 경우 옳은 형식으로 변경해준다.
자 이제 대망의 티스토리에 올리기
블로그 글쓰기의 우측 상단에 기본모드를 HTML로 변경해준다.
그리고 내가 넣고 싶은 위치로 가서 아래의 형식에 복사한 json 구분을 붙여넣기 해 주면 끝이다.
<div id="graph">
<script>
Plotly.plot('graph',
### 여기에 복사한 json을 넣어주자 ###
, {});
</script>
</div>
결과물
그러면 아래와 같이 차트가 나오게 된다.
단순한 이미지 차트가 아닌 반응형 차트다.
한번 이래 저래 만져보시라.
plotly.js를 활용하여 파이썬으로 시각화 한 차트를 티스토리 블로그에 바로 띄우는 방법을 알아보았다.
생각보다 간편해서 자주 활용할 것 같다.
끝!
반응형
'나만 알고싶은 꿀팁 > 티스토리 꿀팁' 카테고리의 다른 글
| [살려는 드릴게] 티스토리 이미지 업로드하다가 먹통 됐을 때 살리는 방법!!!! 많이 힘드시죠? 무조건 살려내드립니다..!! (0) | 2021.08.02 |
|---|---|
| [5분 컷] 티스토리 블로그에 코드블럭 예쁘게 출력하는 방법_highlight.js (7) | 2021.03.05 |
| 티스토리 모바일 작성, 임시 저장 후 글쓰기 시 썸네일 누락 되는 경험 (0) | 2020.12.01 |
| [2020년 최신] 티스토리 임시저장과 자동저장 기능. 확실히 알고가자. (0) | 2020.09.22 |
댓글