[프론트엔드] 유용한 무료 데이터 시각화 플러그인

오늘은 쉽고 빠르게 데이터 시각화를 할 수 있는 몇 가지 툴들에 대해 포스팅 해보려 합니다.

파이썬의 내장 기능처럼 데이터를 시각화 하는 것들에 비새서는 js에서 바로 시각화 하기에는 완성도가 떨어지기에, 플러그인을 사용하겠습니다

 

웹사이트를 제작해주다보면 고객에게는 어떤 ui로 편하게, 기대하는 기능들에 더 쉽고 빠르게 접근을 하는 것이 관건이라면, 관리자에게는 현재 데이터들을 한 눈에 볼 수 있는 것이 중요합니다.

 

사용자의 수가 어떻게 늘고 있는지, 수익이 어떻게 변하고 있는지, 어느 지역의 사용자가 가장 많은 지 등에 대해서 알아봐야 하겠죠.

이러한 데이터 시각화는 마케팅에 대한 효과를 보는데에 도움이 많이 됩니다. 그리고 개발자의 기능 배포 이후 어떻게 변화하는지도 수치로 나중에 활용하기에도 정말 좋구요.

 

이번 포스팅은 데이터를 차트로 시각화 하는 것을 소개드리고 빠지겠습니다.

사용 방법은 링크에 코드와 함께 기재되어있습니다

 

 

 

 

ApexChart

https://apexcharts.com/

ApexCharts.js - Open Source JavaScript Charts for your website

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

여러 페이지에서 사용을 할 것이 아니라면 위의 코드를 html 에 넣어 cdn 으로 활용할 수 있습니다.

 

https://apexcharts.com/javascript-chart-demos/radar-charts/radar-with-polygon-fill/

Radar with Polygon-fill – ApexCharts.js

Apexchart 의 장점은 사용 방법이 정말 간단하다는 것과, 그림을 사진으로 저장할 수 있는 코드를 함께 제공한다는 것입니다.

막대 그래프, 선형 그래프, 원에서 퍼센트로 파이를 그리는 것, 깃허브 잔디심기처럼 히트맵을 그리기, 주식창과 같은 움직이는 그래프 등 다양합니다.

 

또한 JS, Angular, Vue, React 로 나누어 각각 코드도 따로 제공하니 사용하시기에 무리가 없을 것입니다

 

 

 

Google chart

https://developers.google.com/chart/interactive/docs

Google 차트 사용  |  Charts  |  Google for Developers