멋진 Chart.js
Chart.js와 관련된 멋진 것들의 선별된 목록
Chart.js 지원. 현재 사용되는 세 가지 주요 Chart.js 버전이 있습니다. 라이브러리가 Chart.js 버전을 지원하는지 확인하려면 아래 버전 배지를 참조하세요. (또한 "❕"는 지원되지 않는 버전을 의미합니다.)
- Chart.js v. 4️⃣ — 2022년 11월 출시
- Chart.js v. 3️⃣ — 2021년 4월 출시
- Chart.js v. 2️⃣ — 2016년 4월 출시
자원
- 공식 가이드 | 사용자 가이드 및 문서 사이트.
차트
| 지원하다 | 이름 | 설명 |
|---|
| 2️⃣ ❕ ❕ | 바 깔때기 | 막대 깔때기형 차트 유형을 추가합니다. |
| 2️⃣ 3️⃣ 4️⃣ | 상자 그림 | 상자 그림 및 바이올린 플롯 차트 유형 추가 |
| 2️⃣ 3️⃣ 4️⃣ | 오류 막대 | 표준 차트 유형의 다양한 오차 막대 변형을 추가합니다. |
| 2️⃣ 3️⃣ ❕ | 재정적인 | 촛대와 같은 금융 차트 유형을 추가합니다. |
| ❕ 3️⃣ 4️⃣ | 깔때기 | 깔때기형 차트 유형 추가 |
| 2️⃣ 3️⃣ 4️⃣ | 지역 | 등치 및 버블 지도와 같은 지리 지도 차트 유형을 추가합니다. |
| 2️⃣ 3️⃣ 4️⃣ | 그래프 | 힘 방향 그래프와 같은 그래프 차트 유형을 추가합니다. |
| 2️⃣ 3️⃣ 4️⃣ | 행렬 | 매트릭스 차트 유형 추가 |
| 2️⃣ 3️⃣ 4️⃣ | PCP | 평행좌표 플롯 차트 유형 추가 |
| ❕ 3️⃣ 4️⃣ | 산키 | Sankey 다이어그램 차트 유형을 추가합니다. |
| 2️⃣ ❕ ❕ | 스미스 | 스미스 차트 유형 추가 |
| 2️⃣ 3️⃣ 4️⃣ | 쌓인100 | 100% 누적 막대 차트를 그립니다. |
| 2️⃣ 3️⃣ 4️⃣ | 트리맵 | 트리맵 차트 유형을 추가합니다. |
| ❕ 3️⃣ 4️⃣ | 벤 | 벤 및 오일러 차트 유형 추가 |
| ❕ 3️⃣ 4️⃣ | 단어 구름 | 단어 구름 차트 유형 추가 |
플러그인
스타일링
| 지원하다 | 이름 | 설명 |
|---|
| ❕ 3️⃣ 4️⃣ | 자동 색상 | 자동 색상 생성 |
| 2️⃣ ❕ ❕ | 색상 구성표 | 미리 정의된 색 구성표를 사용하여 자동 색상 지정을 활성화합니다. |
| ❕ 3️⃣ 4️⃣ | 구배 | 쉬운 그라데이션 |
| 2️⃣ ❕ ❕ | 거친 | Rough.js를 사용하여 손으로 그린 듯한 스케치 스타일로 차트를 그립니다. |
| 2️⃣ ❕ ❕ | 스타일 | 그림자, 경사, 광선 또는 오버레이 효과와 같은 스타일링 옵션 제공 |
| ❕ ❕ 4️⃣ | 타임스택 | "좋은" 시간 분할을 사용하여 독창적인 시간 척도 형식을 추가합니다. |
특징
| 지원하다 | 이름 | 설명 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 주석 | 차트 영역에 선, 상자, 점, 레이블, 다각형 및 타원을 그립니다. |
| 2️⃣ 3️⃣ ❕ | 십자선 | 꺾은선형 및 분산형 차트에 데이터 십자선을 추가합니다. |
| 2️⃣ 3️⃣ 4️⃣ | 데이터 라벨 | 모든 유형의 차트에 대한 데이터 레이블을 표시합니다. |
| 2️⃣ ❕ ❕ | 도넛라벨 | 도넛 차트 중앙에 텍스트 라벨 표시 |
| 2️⃣ 3️⃣ 4️⃣ | 계층적 | 접고, 펼치고, 집중할 수 있는 계층적 척도를 추가합니다. |
| ❕ ❕ 4️⃣ | 이미지 라벨 | 도넛 차트의 데이터에 이미지 레이블을 표시합니다. |
| 2️⃣ ❕ ❕ | 원형 차트 아웃 라벨 | 원형/도넛형 차트 외부에 레이블을 표시합니다. |
| 2️⃣ ❕ ❕ | 회귀 | 통계적 회귀(추세선) 계산 및 그리기 |
| ❕ ❕ 4️⃣ | 추세선 | 추세선 그리기 |
| 2️⃣ ❕ ❕ | 폭포 | 폭포형 차트를 쉽게 사용할 수 있습니다. |
상호작용
| 지원하다 | 이름 | 설명 |
|---|
| ❕ ❕ 4️⃣ | a11y-전설 | 차트 범례에 대한 키보드 접근성 제공 |
| ❕ 3️⃣ 4️⃣ | 차트2음악 | 키보드 탐색 및 음향화로 차트 접근성 향상 |
| 2️⃣ 3️⃣ 4️⃣ | 연기된 | 차트가 뷰포트로 스크롤될 때까지 초기 차트 업데이트를 연기합니다. |
| 2️⃣ 3️⃣ 4️⃣ | 드래그 데이터 | 사용자가 차트의 데이터 포인트를 드래그할 수 있습니다. |
| 2️⃣ 3️⃣ 4️⃣ | 줌 | 차트의 확대/축소 및 이동을 활성화합니다. |
데이터 소스
| 지원하다 | 이름 | 설명 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 데이터 소스-프로메테우스 | Prometheus의 시계열을 표시합니다. |
| 2️⃣ 3️⃣ ❕ | 스트리밍 | 라이브 스트리밍 데이터에 대한 지원 추가 |
또한 npm 레지스트리에서 많은 플러그인을 찾을 수 있습니다.
어댑터
| 지원하다 | 이름 | 설명 |
|---|
| 2️⃣ 3️⃣ 4️⃣ | 날짜-fns | 날짜-fns 어댑터 |
| 2️⃣ 3️⃣ 4️⃣ | 데이 | dayjs 어댑터 |
| 2️⃣ 3️⃣ 4️⃣ | 룩슨 | Luxon 어댑터 |
| 2️⃣ 3️⃣ 4️⃣ | 순간 | Moment.js 어댑터 |
| ❕ 3️⃣ 4️⃣ | 시공간 | 시공간 어댑터 |
통합
자바스크립트
| 지원하다 | 이름 | 설명 |
|---|
| 2️⃣ ❕ ❕ | ember-cli-차트 | 엠버 CLI |
| ❕ ❕ 4️⃣ | fresh_charts | 신선한 |
| 2️⃣ ❕ ❕ | lwcc | Lightning 웹 구성 요소 |
| 2️⃣ 3️⃣ 4️⃣ | ng2 차트 | 각도 v2+ |
| 2️⃣ 3️⃣ ❕ | 오미차트 | 오미 |
| 2️⃣ 3️⃣ 4️⃣ | 반응 차트 JS-2 | 반응하다 |
| ❕ 3️⃣ 4️⃣ | 솔리드 차트 | SolidJ |
| ❕ 3️⃣ 4️⃣ | svelte-chartjs | 날씬한 |
| 2️⃣ 3️⃣ 4️⃣ | vue-chartjs | Vue.js |
기타
| 지원하다 | 이름 | 설명 |
|---|
| ❕ 3️⃣ ❕ | BlazorChartjs | 블레이저 |
| ❕ 3️⃣ 4️⃣ | pax.BlazorChartJs | Blazor(JavaScript 격리 포함) |
| 2️⃣ 3️⃣ 4️⃣ | 차르바 | GWT/J2CL |
| 2️⃣ ❕ ❕ | 차트.자바 | 자바 |
| ❕ ❕ 4️⃣ | Chartjs-자바 모델 | 자바 |
| 2️⃣ ❕ ❕ | Chartjs-ocaml | OCaml |
| 2️⃣ 3️⃣ ❕ | 차트 js-ror | Ruby, Rails 뷰에서 Chart.js 사용을 단순화합니다. |
| ❕ 3️⃣ 4️⃣ | 차트-js-rs | Rust의 Chart.js 유형 API(알파의 WIP/불완전) |
| 2️⃣ ❕ ❕ | django-chartjs | 장고 |
| 피그마 | 디자인 구성요소 |
| 2️⃣ 3️⃣ 4️⃣ | 아이피차트 | 파이썬 |
| 2️⃣ 3️⃣ 4️⃣ | laravel-chartjs | 라라벨 |
| 2️⃣ ❕ ❕ | 액화하다 | Angular를 사용한 스트림 데이터의 빠른 멀티스레드 시각화 |
| 2️⃣ ❕ ❕ | 노바 차트 | 라라벨 노바 |
| 2️⃣ 3️⃣ 4️⃣ | 퀵차트 | 정적 차트용 웹 API |
| 2️⃣ ❕ ❕ | 사악한 차트 | Java 웹 앱용 래퍼 |
| ❕ 3️⃣ ❕ | 심포니/ux-chartjs | 심포니 UX 번들 |
도구
| 지원하다 | 이름 | 설명 |
|---|
| ❕ 3️⃣ ❕ | x허브 | GitHub 페이지의 Chart.js(및 기타)에 대한 브라우저 확장 |
