plotly 동적 그래프 웹페이지에 삽입하기
plotly에 그래프 업로드
Kaggle_Survey01: Pie [Plotly]에서 작성한 plotly chart는 동적 그래프라 이미지로 사용하긴 아쉽고 github page의 ipynb에서도 동작하지 않는다.
그래프를 끌어오기 위해 plotly 홈페이지 저장환경을 이용할 예정이다.
chart_studio 설치
우선 사용할 작업환경에 chart_studio 라이브러리를 설치해주자.
1 | pip i chart_studio |
※ jupyter 로컬 작업환경을 사용한다면 anaconda prompt로 설치
chart_studio는 plotly 그래프를 plotly 홈페이지에 업로드하고 원한다면 html iframe 태그로 변환까지 해주는 녀석이다.
plotly Access Key
plotly 개인 공간에 업로드 할 예정이니 plotly 회원가입을 진행하자.
[profile] - [API keys] 에서 Access key를 얻어온다.
위에서 설치한 라이브러리를 import하고 API key를 사용해 계정에 접근하자
1 | import chart_studio |
성공적으로 연동했다면 저장할 figure 객체와 저장될 파일명을 넣어준다.
1 | chart_studio.plotly.plot(fig, filename = '파일명', auto_open=True) |
'https://plotly.com/~hangack/1/'
out된 url에 들어가보면 그래프가 업로드 되었을거다.
웹페이지에 그래프 끌어오기
원래 목적이었던 웹페이지에서 그래프를 사용해보자.
html iframe
iframe(inline frame) html 형식을 수작업으로 작성해도 되겠지만 chart_studio 모듈 내 라이브러리에서도 변환할 수 있다.
1 | chart_studio.tools.get_embed('https://plotly.com/~hangack/1/#/') |
'<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plotly.com/~hangack/1.embed" height="525" width="100%"></iframe>'
1 | <iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plotly.com/~hangack/1.embed" height="525" width="100%"></iframe> |
iframe(inline frame):
hexo tag plugin iframe
hexo 환경에서 작성중이라면 기본 plugin인 tag 문법으로도 iframe을 삽입할 수 있다.
1 | {% iframe https://plotly.com/~hangack/1.embed %} |
