JavaScript 차트 라이브러리: 인기 있는 13가지 선택

#1 – Chart.js

Chart.js는 HTML5의 <canvas> 를 사용하여 차트를 렌더링하는 실용적인 차트 라이브러리입니다.

라이브러리는 기본적으로 반응형이며 사용자 행동에 따라 애니메이션 효과를 적용할 수도 있기 때문에 간단한 프로젝트에 가장 적합한 선택입니다.

다음은 Chart.js로 만들 수 있는 8가지 유형의 차트입니다.

• 영역 차트
• 막대 차트
• 거품형 차트
• 도넛과 파이 차트
• 라인 차트
• 혼합 차트 유형
• 극지방 차트
• 레이더 차트

사용 편의성에 관한 한 구문은 간단하며 이전에 JavaScript로 작업한 적이 없더라도 새 차트를 만드는 것은 간단합니다.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

동적 기능 및 데이터 풀링으로 차트를 확장하려는 경우 라이브러리에 새 기능을 추가하는 데 사용할 수 있는 플러그인 시스템이 있습니다.

Chart.js 예제

CodePen에서 Sven(@hofmannsven)의 펜 개념 증명: Chart.js with Background Gradient를 참조하십시오.

Chart.js 추가 리소스

• Chart.js + Next.js = 아름다운 데이터 기반 대시보드
• Chart.js 시작하기 작업 기반 학습

#2 – D3.js

D3는 기존의 차트 라이브러리가 아닌 데이터 시각화 도구 라는 점으로 시작하겠습니다.

D3를 사용하면 데이터 세트를 지정하고 DOM에 바인딩할 수 있습니다. 나중에 라이브러리 기능을 사용하여 해당 데이터를 고유한 시각적 표현으로 변환할 수 있습니다. 시각적 표현의 경우 D3는 페이지에 데이터를 렌더링하기 위해 HTML 테이블, SVG 및 <canvas> 를 활용합니다.

여러 개의 대화형 데이터 포인트가 있는 지리 기반 회전하는 지구본 중 하나를 본 적이 있다면 프레젠테이션이 D3로 구축되었을 가능성이 있습니다. 그러나 아래 데모에서 볼 수 있는 기본 차트와 같이 실용적인 용도로도 잘 작동합니다. 궁극적으로 D3의 공식 자습서 섹션을 참조하여 더 복잡한 기능을 탐색하는 것이 좋습니다.

D3.js 예제

CodePen에서 Web Dev(@ronaldmarin)의 Pen D3 차트 + ReactJS를 참조하세요.

D3.js 추가 리소스

• D3.js 튜토리얼
• D3.js 캘린더 히트맵 구축

#3 – 아파치 전자 차트

Apache EChart가 인기 있는 이유 중 하나는 상자에서 꺼내자마자 수백 개의 미리 만들어진 차트 예제에 액세스할 수 있기 때문입니다. 예제 디렉토리를 방문하여 직접 확인할 수 있습니다. 이 페이지에서는 선, 막대, 원형 차트, 분산형, 히트맵, 그래프 등과 같은 범주의 차트와 예제를 다룹니다.

또한 모든 단일 예제에는 JavaScript 및 TypeScript 코드 예제가 포함되어 있습니다. 하지만 그게 다가 아닙니다. 이 라이브러리를 사용하면 몇 가지 실질적인 이점이 있습니다. 다음은 그 중 몇 가지입니다.

• 데이터 스트리밍. 수백만 개의 데이터 포인트가 있는 대화형 차트를 만들고 싶으십니까? ECharts는 WebSocket을 사용하여 데이터를 스트리밍하므로 매우 큰 데이터 세트에서도 비동기식으로 로드할 수 있습니다.
• 모바일 친화적. 사용자가 모바일 장치에서 EChart를 볼 때 차트 자체는 최상의 전달 가능성을 보장하기 위해 확대/축소, 이동 및 SVG 렌더링과 같은 대화형 기능을 제공하도록 최적화되었습니다.
• 동적 데이터. EChart에 여러(별도의) 데이터 포인트를 제공할 수 있으며 라이브러리는 사용자에게 대화형 경험을 제공하기 위해 차트에 자동으로 애니메이션을 적용합니다.
• 접근성. Apache ECharts(v4.0 이상)는 WAI-ARIA 지침을 따르도록 구축되었습니다.

외부 CDN을 사용하여 웹사이트에 차트를 표시할 수도 있습니다.

Apache EChart 예제

CodePen에서 Vale(@vsigno)의 Pen Apache Echart 예제를 참조하십시오.

Apache ECharts 추가 리소스

• 일주일 만에 더 나은 GitHub Insight 도구 구축

#4 – 음모

Plotly는 데이터 애플리케이션 배포를 위한 로우 코드 솔루션인 Dash의 모회사입니다. 그리고 사내에서 자체 그래프 라이브러리인 Plotly 를 개발합니다.

Plotly를 사용하면 가장 기본적인 차트 시각화를 만들 수 있지만 라이브러리의 진정한 힘은 통계 기반 차트, 3D 데이터 표현 및 재무 데이터 기반 차트를 생성하는 기능에 있습니다.

Node.js 모듈로 사용할 수 있지만 CDN에서 직접 사용할 수도 있습니다.

플롯 예

CodePen에서 플롯(@plotly)으로 클릭 이벤트 시 펜 추가 주석을 참조하세요.

#5 – 프라페

Frappe 차트 라이브러리는 Frappe 프레임워크를 만든 사람들이 만듭니다. 이 라이브러리는 간단합니다. 그리고 그 단순함은 도서관의 인기에 기여하는 주요 요인입니다.

라이브러리는 외부 종속성이 필요하지 않으며 몇 줄의 코드로 모바일 친화적인 SVG 차트를 렌더링할 수 있습니다. 다음은 기본 축 차트에 대한 코드 예제입니다.

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

이 작은 스니펫은 다음과 같은 차트로 변환됩니다.

실시간으로 데이터를 업데이트하거나 내보낼 계획이라면 혼합 차트(하나의 여러 차트), 주석, 히트맵 및 API에 대한 지원도 있습니다.

프라페 예

CodePen에서 Jean Rush(@weakish)의 Pen Frappe Hello World를 참조하십시오.

#6 – ApexCharts

ApexCharts는 매우 전통적인 차트 라이브러리입니다. ApexCharts와 Frappe(예:)의 주요 차이점은 ApexCharts가 약간 더 많은 데모를 제공한다는 것입니다. 그러나 React, Vue 및 Angular와 같은 인기 있는 프레임워크에 대한 기본 지원도 제공합니다. 이것은 또한 모든 데모 차트에 해당 프레임워크의 구문으로 작성된 해당 샘플이 있음을 의미합니다.

기능의 경우 모든 차트는 SVG 형식으로 생성되며 기본적으로 모바일 친화적입니다. 부드러운 애니메이션 및 주석과 같은 기능을 활용하고 10가지 샘플 스타일 중 하나를 선택하여 차트 테마 팔레트를 사용자 지정할 수도 있습니다.

ApexCharts 예

CodePen에서 ApexCharts(@apexcharts)의 Pen Realtime Dashboard를 참조하십시오.

#7 – G2

저는 최근에 React.js 및 Vue의 구성 요소 라이브러리에 대한 기사를 포함하여 Ant Design에 대해 여러 번 이야기했습니다. Ant는 GitHub에서 매우 인기가 있을 뿐만 아니라 커뮤니티에서 전 세계 모든 지역에서 Ant를 사랑합니다.

그리고 G2 차트 라이브러리(또는 "시각화 문법"이라고 함)는 Ant Design System을 사용하는 Ant Design의 차트 시스템 구현입니다. 실시간 데이터 시각화와 관련된 다른 많은 라이브러리를 찾을 수 있는 AntV 홈페이지를 확인하는 것이 좋습니다.

관리 대시보드와 같은 것을 구축하고, 데이터 경로를 생성하고, 렌더링 엔진을 사용하여 대화형 데이터 시각화 예제를 만드는 데 가장 자주 사용됩니다. 이 엔진은 WebGL, Canvas 및 SVG를 통해 차트 및 데이터 벡터를 렌더링할 수 있습니다. 그리고 라이브러리는 플러그인 가능하기 때문에 D3.js(앞서 본)와 같은 보다 강력한 라이브러리를 통해 차트 프레젠테이션을 더욱 향상시킬 수 있습니다.

#8 – 러프비즈

Jared Wilber의 RoughViz 라이브러리는 D3.js, Rough.js 및 손으로 그린 ​​스케치 프로세서인 Handy의 3가지 다른 라이브러리의 조합입니다. 위의 예시 스크린샷에서 알 수 있듯이 이것은 일반적인 차트 라이브러리가 아닙니다. RoughViz는 JavaScript를 사용하여 손으로 그린 ​​스케치 스타일 차트를 만드는 데 도움이 되도록 완전히 구축되었습니다.

이러한 유형의 라이브러리는 개인 프로젝트, 즉 기존의 전문가 스타일 접근 방식보다 더 창의적인 스파크가 필요한 프로젝트에 큰 도움이 될 것입니다. 그리고 구문 자체는 Frappe 및 ApexCharts와 매우 유사하여 가능한 한 간단합니다.

아래 데모에서 직접 확인할 수 있습니다.

러프비즈 예제

CodePen에서 Danny Englishby(@DanEnglishby)의 Pen RoughViz 데모를 참조하십시오.

#9 – 경량 차트

금융 관련 프로젝트(또는 그 문제에 대한 암호화폐)에서 작업하는 경우 이전에 언급한 차트 라이브러리 중 많은 부분이 잘리지 않을 것이 분명합니다. 재정 기반 차트와 그래프를 표시하기 위해 특별히 제작된 차트 라이브러리인 경량 차트가 있습니다.

이 라이브러리는 오픈 소스 이며 가벼울 뿐만 아니라 재무 및 동적 구조에 대한 차트 데이터를 표시하는 데 필요한 모든 필수 기능을 포함합니다.

이러한 기능 중 하나는 실시간 데이터를 캔버스에 전달한 다음 사용자가 페이지를 새로 고칠 필요 없이 업데이트할 수 있는 데이터 스트리밍입니다. 그리고 고려할 수 있는 또 다른 요소는 성능이며 이 라이브러리의 홈페이지에 설명된 대로 문제가 되지 않아야 합니다.

“저희 차트 솔루션은 처음부터 거대한 데이터 어레이와 함께 작동하도록 설계되었습니다. 새로운 틱으로 초당 여러 번 업데이트하더라도 수천 개의 막대가 있는 경우에도 차트는 응답성과 민첩성을 유지합니다.”

아래 데모를 확인하여 느낌을 확인하고 많은 차트 옵션 및 기능도 확인하십시오.

경량 차트의 예

CodePen에서 truong(@truong160196)의 Pen tradingview 고급 차트를 참조하십시오.

경량 차트 추가 리소스

• 애플리케이션에 대한 재무 차트

#10 – 빌보드

빌보드는 D3 기반의 인터페이스 차트 라이브러리입니다. SVG 렌더링, 모바일 장치에 대한 터치 지원, 간단한 인터페이스, 훌륭한 API 문서 등 여러분이 기대하는 모든 최신 기능을 갖추고 있습니다.

그러나 내가 가장 좋아하는 기능은 틀림없이 다른 많은 사람들에게도 Billboard가 이 라이브러리로 만들 수 있는 차트의 230개 이상의 예를 제공한다는 것입니다. 이러한 예는 기본, 축, 데이터, 그리드, 상호 작용, 지역 등과 같은 차트 범주로 나뉩니다.

즉, 프로젝트 및 해당 요구 사항에 대한 올바른 차트 유형을 찾을 수 있을 뿐만 아니라 다른 옵션을 탐색하고 특정 예가 관심을 끄는지 확인할 수 있습니다.

Billboard.js 예제

CodePen에서 Pen Chart Requests – Billboard.js by DTCC(@dtcc)를 참조하십시오.

#11 - 관점

Perspective는 FINOS(Open-Source Fintech)가 운영하는 프로젝트 중 하나이며 FINOS 자체도 Linux Foundation의 일부입니다. 경량 차트와 매우 유사 - Perspective.js는 재무 기반 프로젝트를 위한 차트 솔루션을 제공하는 데 중점을 두고 있습니다. 그러나 그 이상을 수행할 수 있으며 전자 상거래, 데이터 그리드 및 배송 세분화와 관련된 프로젝트에서 자주 사용됩니다.

Covid-19, 공항 및 올림픽과 같은 주요 스포츠 이벤트에 대한 차트를 본 적이 있다면 인터페이스 및 데이터 스트림 통합이 Perspective로 완료되었을 가능성이 큽니다. 데이터 스트림 및 복잡한 실시간 분석에 최적화된 풍부한 사용자 인터페이스가 있습니다.

JavaScript 및 Python 개발자가 사용할 수 있으며 Custom Elements Web Component를 사용합니다.

#12 – 토스트 UI 차트

어쨌든 Toast UI 차트 라이브러리는 차트 스타일과 디자인이 진행되는 한 고려해야 할 또 다른 선택입니다. 여기의 기능은 이미 살펴본 라이브러리와 매우 유사합니다.

Toast UI가 다른 선택과 다른 부분은 API 사양이라고 생각합니다. 아마도 당신이 손에 넣을 수 있는 더 나은 API 중 하나일 것이며 무료 심층 문서와 함께 제공됩니다. API 기능 중 하나는 데이터 소스가 변경되었거나 사용자 입력으로 인해 차트 데이터를 동적으로 변경할 수 있는 Instances 입니다.

Toast가 지원하는 차트 유형에는 막대, 열, 선, 영역, 거품, 트리맵, 레이더, 방사형 막대 등이 있습니다. 이 라이브러리를 사용하는 기본 방법은 npm을 사용하는 것이지만 CDN을 사용할 수 있으며 차트를 표시할 위치에 대해 div id="chart" 컨테이너를 지정하기만 하면 됩니다.

#13 – 차트

주로 React.js로 작업하는 경우 Recharts 라이브러리는 React를 사용하여 D3.js 위에 빌드됩니다. 기본 React.js 구성 요소 아키텍처를 존중하며 Rechart로 만든 차트를 분리하여 필요한 페이지의 개별 구성 요소로 재사용할 수 있습니다.

모든 차트 예제에는 기존 프로젝트에서 시도하려는 경우를 위해 미리 작성된 구성 요소 구조가 있습니다. 라이브러리는 2016년에 처음 출시되었지만 여전히 활발히 개발 중입니다.

차트 예

CodePen에서 binu(@binutomy)의 Pen ReCharts를 참조하세요.