예전에나 지금이나 차트를 표시해줘야 할 때는 c3.js를 잘 이용하고 있다.
근데 사용하다보니 디자인이 좀 질려서.. 직접 커스텀 하기는 또 귀찮고
다른 차트 라이브러리는 어떤게 있는지 좀 찾아봤다.
1. c3.js
C3.js | D3-based reusable chart library
Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom st
c3js.org
이건 위에서 말했다시피 내가 자주 쓰던 라이브러리
다들 많이 쓰지 않을까 싶다. 개인적으로 친숙함.ㅎㅎ
아래는 내가 c3 라이브러리 사용했던 기록
javascript ) c3.js를 이용한 차트 표시
쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그래프를 표시해주어야 했다. 예전 작업에서 사용했던 c3.js가 생각나서 사용해보기로 했다. 시작하기 일단
vivacolor96.tistory.com
javascript ) c3.js 차트에 데이터 연동하기 (ajax + php + mysql)
c3.js 설치 및 기본 사용법은 아래 링크 참고 https://vivacolor96.tistory.com/68 javascript ) c3.js를 이용한 차트 표시 쇼핑몰 관리자를 작업중인데, 대시보드에 매출이나 회원 등의 수치 변화를 나타내는 그
vivacolor96.tistory.com
2. morris.js
morris.js
Getting started Add morris.js and its dependencies (jQuery & Raphaël) to your page. 1 2 3 4 If you don’t want to use the CDN-hosted assets, then you can extract them from the zip bundle and upload them to your own site. Your first chart Start by adding
morrisjs.github.io
c3.js와 딱히 별 차이는 없어보인다.
요것도 막대그래프, 선형그래프 등등 지원하는 디자인이 많다.
c3.js 사용하듯이 쓰면 될듯한 무난한 라이브러리
3. Chartist.js
Chartist - Simple responsive charts
You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but
gionkunz.github.io
얘는 위에 두 라이브러리보다 조금 더 깔끔한 느낌.
노출해주는 데이터가 많이 생략되어 있다.
각 수치보다는 추이를 보기 편한 느낌? 디자인적으로는 c3나 morris보다 더 예쁘고 간단한 것 같다.
그리고 svg로 그래프 만드는 것도 있던데.. 신기하긴 하다.
4. Apache ECharts
Apache ECharts
ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations,
echarts.apache.org
다크모드도 지원하고 위의 다른 라이브러리에서 보지 못했던 신기한 차트도 지원한다.
위의 다른 라이브러리보다 복잡한 데이터를 보여주어야 할 때 잘 이용할 수 있을 것 같다.
주식마냥 그래프 움직이는 것도 있고, 평생 안 쓸 것 같기도 한 그래프도 있음..
5. Highcharts
Interactive charting library | Highcharts
We make it easy for developers to create charts and dashboards for web and mobile platforms. For Javascript, Angular, React, VueJS, iOS, R, .NET, Python, and more.
www.highcharts.com
차트 종류가 엄청 많다. 제일 많은 것 같다.
무슨 나라별 지도도 지원해주는 것 같고, 차트 분석하는 대시보드까지도 지원해준다.
무료버전이 있고, 유료버전이 있는데 지원해주는 기능에 따라 갈리는건지 잘 모르겠다.
그렇지만 완성도가 엄청 높아보여서 한번 사용해보고 싶긴하다. 신기하네..
6. chart.js
Chart.js | Chart.js
Chart.js Welcome to Chart.js! Why Chart.js Among many charting libraries (opens new window) for JavaScript application developers, Chart.js is currently the most popular one according to GitHub stars (opens new window) (~60,000) and npm downloads (opens ne
www.chartjs.org
얘도 무난한 차트 라이브러리 같다.
대신 디자인 커스텀이 c3나 morris보다 좀 더 다양하게 가능한 듯 하다.
움직이는 차트도 있고, 차트 자체에 애니메이션 효과를 마음대로 커스텀 가능하다.
차트는 관리자 사이트에 많이 작업했기에, 사용자 페이지에 넣을 일 있으면 해당 라이브러리를 써보는 것도 좋을 것 같다. 예쁘니까..
'개발 > Javascript' 카테고리의 다른 글
| javascript ) highcharts.js로 도넛 그래프 그리기 (0) | 2024.02.12 |
|---|---|
| javascript ) c3.js 차트에 데이터 연동하기 (ajax + php + mysql) (0) | 2023.12.11 |
| javascript ) c3.js를 이용한 차트 표시 (0) | 2023.12.09 |