plotly를 이용하면 쉽게 인터랙티브 한 그래프를 만들 수 있습니다. 웹에도 배포가 가능한데요. 그래서 최근에 plotly 그래프를 티스토리 블로그에 올렸습니다. 올리면서 겪은 시행착오를 정리해 포스팅합니다. 파이썬 plotly 그래프 웹페이지, 블로그에 올리는 방법을 알아보겠습니다.
plotly는 파이썬 데이터 시각화 패키지입니다. 예전에는 문법이 좀 까다로웠는데, 최근에 굉장히 쉽게 바뀌었습니다. 이 정도면 분석을 할 때 써도 충분히 활용할 수 있습니다. seaborn패키지의 문법과 더 가까워졌으면 하는 바람이 있습니다.
1. plotly 그래프 그리는 2가지 방법
plotly그래프를 파이썬에서 그리는 방법은 2가지가 있습니다. 하나는 예전처럼 graphobj를 이용하는 방법이고, 다른 하나는 matplotlib과 유사하게 figure와 express모듈을 이용하는 방법입니다. 후자가 문법이 훨씬 이해하기 쉽습니다. 그래서 후자로 그래프를 그리고 티스토리에 배포해 보기로 하였습니다. plotly문법에 대해서는 다음에 한 번 다뤄보겠습니다.
우선 plotly그래프를 하나 그렸습니다.
import plotly.express as px
fig = px.line(df_graph_tot, x="period", y="휴면카드수", color="카드사")
fig.show()
figure객체는 그래프 내용을 추출할 수 있는 to_json, to_plotly_json, to_html의 3가지 함수가 있습니다.
- to_json: json형식으로 추출해 줍니다. 웹에 배포할 때 사용할 수 있습니다.
- to_plotly_json: 파이썬의 딕셔너리 자료형으로 추출해 줍니다.
- to_html: html언어로 추출합니다.
2. 파이썬 plotly 그래프 웹페이지에 올리는 방법
위의 방법 중 웹페이지로 배포할 때 사용하는 것은 to_json과 to_html입니다. 그런데 to_html은 plotly 자바스크립트까지 추출해서 내용이 굉장히 많습니다. 그래서 to_json을 사용하기로 했습니다. to_json으로 추출된 내용으로 아래 html을 만들면 plotly로 만든 그래프를 볼 수 있습니다.
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<title>Graph</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div class="chart" id="graph">
<script>
var graphs = to_json으로 추출된 값을 넣는다.
Plotly.plot('graph', graphs, {});
</script>
</div>
</body>
</html>
3. 한글을 사용해야 한다면?!
그런데 문제가 있습니다. 한글이 모두 깨져서 나오는 것인데요. to_json으로 추출할 때 한글은 바이트 코드마냥 \\uce74\\ub4dc\\uc0ac 이렇게 나옵니다. 전체 문자열을 인코딩을 바꿔봐도 해결되지 않습니다. 하나씩 byte로 변환해서 다시 인코딩을 해야 될 듯합니다. 여기까지 생각하니 너무 복잡하고, 해도 잘 될 거라는 확신이 들지 않습니다.
temp.encode("UTF-8")
temp.encode("EUC-KR")
temp.encode("cp949")
temp.encode("ascii")
찾아보니 문자열이 유니코드 방식으로 표현된 것을 알 수 있습니다. 이 한글을 제대로 표현하기 위해서는 encode함수를 이용해 bytes형으로 바꾼후에 decode함수를 이용해 unicode_escape로 바꿔주면 됩니다. 그래서 아래와 같이 하였더니, 정상적으로 한글이 나오는 것을 확인할 수 있었습니다.
temp = temp.encode('utf-8')
temp = temp.decode('unicode_escape')
print(temp)
이렇게 한 후 웹페이지에 올리니 그래프가 잘 나옵니다. 티스트리에도 html 편집 모드로 바꾼 후에 아래와 같이 넣어 주었습니다.
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div class="chart" id="graph">
<script>
var graphs = to_json으로 추출된 값을 넣는다.
Plotly.plot('graph', graphs, {});
</script>
</div>
티스토리 블로그에서도 그래프가 잘 나옵니다. 그런데 한 가지 문제가 생겼습니다. plotly그래프는 인터랙티브한 조정이 가능합니다. 확대, 축소도 되고, 마우스를 올리면 해당 위치의 값도 나옵니다. 하지만 티스토리에서는 잘 작동하지 않았습니다. 어딘가에서 충돌이 일어나는 것 같은데, 이를 지금 해결하기는 쉽지 않겠네요. 일단 이 수준에서 만족하기로 했습니다.
오늘은 이렇게 파이썬 plotly 그래프 웹페이지, 블로그에 올리는 방법에 대해서 알아보았습니다. 영문이면 좋았을 것을 한글 인코딩 문제로 고생을 좀 해야 했습니다. 한글을 사용하다 보니 이런 때가 좀 아쉽긴 하네요. 앞으로는 한글 지원도 잘 됐으면 좋겠습니다.
'데이터 > 데이터 분석' 카테고리의 다른 글
| 한국수출입통계를 파이썬으로 bar chart 그리기 (0) | 2022.06.17 |
|---|---|
| yellow brick, ElbowVisualizer AttributeError?! (0) | 2022.05.25 |
| 파이썬 데이터 분석, EDA를 도와주는 패키지-sweetviz! (0) | 2022.05.03 |
| 코랩(colab)에서 pandas_profiling 실행하는 방법은?! (0) | 2022.04.30 |
| 파이썬 그래프 그리기, 동적으로 움직이는 그래프 그리는 방법은?! (0) | 2022.04.27 |
| 파이썬 대화형 그래프 쉽게 그리기, plotly express 이용 방법은?! (0) | 2022.04.26 |
| 파이썬 판다스 데이터 프레임 만들기 5가지 방법과 추천방법은?! (0) | 2022.04.24 |
| 파이썬 plotly 그래프 x축,y축 등 변경 update_layout은?! (0) | 2022.04.20 |
