차트 관련 스트립트 사이트

https://www.chartjs.org/docs/latest/samples/other-charts/doughnut.html

Doughnut | Chart.js

 

• HTML/JS에서 간단하게 막대, 원형, 선형 차트를 만들 수 있음.
• 사용법이 직관적이고, 애니메이션도 기본 지원.
• CDN 스크립트 한 줄로 바로 사용 가능.
• 반응형 차트 지원.
• 100% 오픈소스, MIT 라이선스 → 상업·비상업 모두 무료.
• 기능 제약 없음.
• <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> 사용.

---

 

https://apexcharts.com/javascript-chart-demos/pie-charts/update-donut/

Donut Update – ApexCharts.js

 

• 인터랙션이 자연스럽고, 현대적인 디자인.
• 범례 클릭으로 데이터 on/off 가능.
• 차트 종류가 많고, 대시보드 스타일 만들기 좋음.
• MIT 라이선스, 기본 기능 무료.
• 기업용 라이선스(화이트라벨 등)는 유료지만, 대부분의 퍼블리셔 작업엔 무료 버전으로 충분.
• <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> 사용.

---

https://echarts.apache.org/examples/en/index.html#chart-type-pie

 

Ring Style - Pie - Common Charts - How To Guides - Handbook - Apache ECharts

 

• 중국 Baidu에서 만든 고성능 차트 라이브러리.
• 지도 시각화, 3D 차트, 복잡한 통계도 가능.
• 문법은 조금 길지만, 옵션만 잘 설정하면 퍼블리셔도 충분히 사용 가능.
• Apache 2.0 라이선스, 완전 무료.
• 기능 제약 없음.

https://echarts.apache.org/examples/en/index.html#chart-type-funnel

Examples - Apache ECharts

 

---

 

https://developers.google.com/chart/interactive/docs/gallery/piechart?hl=ko#donut

시각화: 원형 차트  |  Charts  |  Google for Developers

 

• 구글에서 제공하는 차트 라이브러리.
• 스프레드시트처럼 데이터 연결하기 쉬움.
• 로딩 속도가 빠르고 무료.
• 구글에서 무료 제공.
• 단, 구글 서버에서 JS를 불러와야 함(오프라인 사용 불가).

---

https://demos.pixinvent.com/robust-html-admin-template/html/ltr/vertical-menu-template/echarts-pie-doughnut-charts.html

Echarts - Pie & Doughnut Chart - Robust - Responsive Bootstrap 4 Admin Dashboard Template for Web Application

 

---

https://echarts.apache.org/examples/en/editor.html?c=gauge-progress

Examples - Apache ECharts

 

퍼블리셔용 추천 순서
Chart.js → ApexCharts → ECharts
(D3.js는 나중에 필요할 때 배우는 걸 추천)

Chart.js나 ApexCharts를 쓰면 제일 간단하게 구현 가능

 

 

차트 디자인 Deciboard

https://kr.pinterest.com/search/pins/?q=Deciboard&rs=rs&source_id=rs_7G79bkJ0&eq=&etslf=1705

Pinterest