데이터는 우리 주변 어디에나 있습니다. 우리는 이를 성능, 서비스 제공 및 효율성을 최적화하는 데 사용합니다. 그러나 원시 숫자가 항상 정보를 전달하는 최선의 방법은 아닙니다. 사람들은 텍스트 형식이 아닌 시각적 형식으로 제공한 데이터를 유지할 가능성이 더 높습니다. 따라서 다이어그램은 정보를 공유하는 데 없어서는 안 될 도구입니다.
JavaScript는 웹사이트에서 차트를 만드는 데 사용할 수 있는 다양한 무료 라이브러리를 제공합니다. 이 기사에서는 최고의 무료 JavaScript 차트 라이브러리 목록을 만들고 정보에 입각한 선택을 하는 데 도움이 되는 기능에 대한 간략한 개요를 제공합니다.
웹사이트에서 차트를 그릴 때 가장 먼저 떠오르는 라이브러리 중 하나는 Chart.js입니다. 이 라이브러리를 사용하는 가장 큰 장점 중 두 가지는 배우기가 매우 쉽고 웹 사이트에 통합할 수 있으며 꺾은선형 차트, 막대형 차트, 방사형 차트, 거품형 차트, 분산형 차트 등 8가지 일반적인 유형의 차트를 만들 수 있다는 것입니다. 영역, 원형 및 극좌표 차트 차트. 동일한 차트에 두 개 이상의 차트 유형을 표시할 수도 있습니다.
Roseclad의 애니메이션 데모.
라이브러리는 HTML5 캔버스 요소를 사용하여 모든 차트를 렌더링하며 차트는 기본적으로 반응형입니다. 이는 화면 크기의 변화에 적응한다는 것을 의미합니다. 라이브러리에서 제공하는 기본 방법을 사용하여 차트의 다양한 측면에 애니메이션을 적용할 수도 있습니다.
Chartist.js 라이브러리는 JavaScript의 도움으로 자신만의 차트를 만들고 싶어하는 사람들을 위한 또 다른 사용하기 쉬운 솔루션입니다. Chart.js와 Chartist.js 사이에는 몇 가지 유사점이 있지만 몇 가지 근본적인 차이점도 있습니다.
Ian Whitfield의 차트스트 데모.
이 라이브러리는 Chart.js와 마찬가지로 가볍고 반응성이 뛰어납니다. 또한 배우기 쉽고 선형 차트, 막대 차트, 원형 차트 등과 같은 모든 기본 차트 유형을 지원합니다. 이 라이브러리에는 차트가 작동하기 위해 로드해야 하는 외부 종속성이 없습니다.
Chart.js와 Chartist.js의 한 가지 큰 차이점은 후자가 차트를 렌더링하기 위해 SVG를 사용한다는 것입니다. 모든 차트는 여러 하위 유형으로 나뉩니다. 예를 들어 간단한 꺾은선형 차트는 물론 기본 영역이 채워진 꺾은선형 차트나 양극성 꺾은선형 차트도 만들 수 있습니다.
Chartist.js는 차트 렌더링 기능을 제공하는 데 엄격하게 중점을 두고 있습니다. 이는 이벤트 처리, 레이블 표시 등을 위한 내장 기능이 없다는 것을 의미합니다. 그러나 직접 추가하는 것은 상대적으로 쉽습니다.
D3.js 라이브러리는 Data-Driven Document의 약어로, 데이터 시각화 분야의 헤비급 라이브러리 중 하나입니다. 이 라이브러리를 사용하여 원하는 방식으로 데이터를 시각적으로 표현할 수 있습니다. 여기에는 표준 차트 유형도 포함됩니다.
Jahid Hssan의 D3 데모.
이 라이브러리의 가장 큰 장점은 차트를 만들 때 얻을 수 있는 강력함과 유연성입니다. 이 라이브러리를 사용하면 데이터를 표현하기 위해 상상할 수 있는 거의 모든 것을 만들 수 있습니다. 일반적인 차트 유형으로 제한되지 않습니다. 라이브러리는 SVG, Canvas 및 HTML과 같은 기술을 혼합하여 사용하여 시각적 요소를 만듭니다.
렌더링의 유연성이 매우 높다는 것은 이 라이브러리가 제공하는 모든 기능을 사용하는 데 있어 가파른 학습 곡선이 있다는 것을 의미합니다. 작업을 완료하는 데 도움이 되는 약 30개의 모듈과 1,000개 이상의 방법이 있습니다.
일부 사람들은 D3.js를 사용하여 웹 사이트에서 차트를 만드는 것에 흥미를 느낄 수도 있지만 가파른 학습 곡선으로 인해 낙담할 수도 있습니다. 이 문제에 대한 해결책이 있다고 말하면 어떻게 될까요?
C3.js 라이브러리는 중간 지점을 제공합니다. 여러분이 만드는 차트는 내부적으로 여전히 D3.js를 사용하지만 이를 수행하기 위해 코드를 작성하거나 D3.js 라이브러리의 모든 세부 사항을 배우는 데 너무 많은 시간을 소비할 필요는 없습니다. . 이는 D3.js를 기반으로 차트를 만드는 데 주로 관심이 있는 사람들에게 훌륭한 솔루션입니다.
Beat Temperli의 C3 데모.
이 라이브러리를 유용하게 만드는 세 가지 기능은 사용 용이성, 사용자 정의 옵션, 표시되는 그래프에 대한 제어입니다. 이 라이브러리는 기본적으로 D3.js를 둘러싼 래퍼이므로 차트를 만드는 데 필요한 모든 무거운 작업을 수행합니다.
라이브러리는 렌더링하는 각 요소에 대한 사용자 정의 클래스도 제공하므로 자신만의 스타일을 더 쉽게 제공할 수 있습니다. 마지막으로, 차트가 렌더링된 후에도 차트의 동작을 제어하는 데 사용할 수 있는 콜백이 꽤 많이 있습니다.
Frappe Charts는 세련되고 반응이 빠른 차트를 쉽게 만들 수 있도록 도와주는 놀라운 오픈 소스 라이브러리입니다. 차트를 렌더링하기 위해 추가 종속성을 로드할 필요가 없습니다.
Kamal Dev의 프레젠테이션.
라이브러리에는 막대형, 선형, 영역형, 원형 및 도넛형 차트와 같은 다양한 차트 유형이 내장되어 있습니다. 원형 차트와 유사하지만 원 대신 막대에 다양한 항목의 점유율을 표시하는 백분율 기반 차트를 만들 수도 있습니다. GitHub에 표시되는 리포지토리 기여 차트와 유사한 히트맵 차트를 만들 수도 있습니다.
이 라이브러리에서 마음에 드는 점 중 하나는 제공되는 사용자 정의 범위입니다. 라이브러리와 함께 제공되는 툴팁은 훌륭합니다. 다양한 선과 영역을 표시하여 다이어그램에 주석을 달 수도 있습니다. 다양한 구성 옵션을 사용할 수 있으며 렌더링된 데이터 포인트를 수정할 수도 있습니다.
Plotly.js는 확장된 기능 목록을 갖춘 무료 오픈 소스 JavaScript 라이브러리이기도 합니다. 라이브러리에는 이러한 언어로 그래프를 그리려는 경우를 대비해 Python 및 R 모듈도 포함되어 있습니다.
plotly의 데모.
Plotly는 D3.js 및 stackgl을 기반으로 구축되었습니다. 그러나 D3와 달리 Plotly 개발자는 일반적인 차트 유형을 보다 쉽게 사용하고 상당히 빠르게 그리는 데 특별히 중점을 두었습니다. 이는 다양한 차트 유형을 찾는 사람들에게 이상적입니다. Plotly를 사용하면 기본 선, 막대, 분산형 차트부터 히스토그램 및 2D 밀도 플롯과 같은 통계 차트까지 모든 것을 포괄하는 40가지 유형의 차트를 만들 수 있습니다.
라이브러리에는 이벤트 처리 기능이 내장되어 있으며 클릭, 호버, 선택 이벤트 등을 처리할 수 있습니다. 또한 확대 및 축소, 패닝, 재설정 등과 같은 기타 많은 구성 옵션과 유용한 기능을 제공합니다. Plotly.js를 사용하면 차트를 편집 가능하게 만들거나 자신의 로케일을 사용하여 레이블에 텍스트를 표시할 수 있습니다.
ApexCharts는 간단한 API를 사용하여 대화형 차트를 작성하기 위한 최신 JavaScript 차트 라이브러리라고 설명합니다. 이 라이브러리를 사용하여 차트를 만드는 것은 실제로 간단한 과정입니다. 차트 유형, 레이블, 키-값 쌍이 있는 개체로 플롯할 데이터 세트 등 필요한 모든 데이터를 전달하기만 하면 라이브러리가 모든 것을 렌더링합니다.
Reuben Prol의 데모.
이 라이브러리의 다른 주목할만한 기능으로는 다양한 차트를 만든 다음 동기화하는 기능이 있습니다. 한 차트에 대한 변경사항은 다른 차트에 반영됩니다. 차트와 상호 작용할 수 있는 다양한 옵션이 있습니다. 데이터를 확대 및 축소하거나 이동하거나 위아래로 스크롤할 수 있습니다.
사용 가능한 차트 유형에는 선형 차트, 막대 차트, 원형 차트, 도넛 차트, 방사형 차트, 촛대 차트 등이 포함됩니다. 막대형, 선형, 영역형 차트를 서로 겹치게 표시하는 등 다양한 차트 유형을 함께 혼합할 수도 있습니다. 자신만의 주석을 추가하고 차트 데이터를 동적으로 업데이트할 수도 있습니다.
uPlot JavaScript 차트 라이브러리는 성능에 부정적인 영향을 주지 않고 많은 수의 데이터 포인트를 표시하려는 사람들을 위한 작고 빠른 솔루션이라고 주장합니다. 또한 GitHub 페이지에서 일부 인기 차트 라이브러리와의 속도 비교도 제공합니다.
놀라운 성능 지표는 라이브러리가 135밀리초 안에 약 150,000개의 데이터 포인트를 플롯할 수 있다는 것입니다. 다른 기능으로는 매우 빠르고 반응성이 뛰어난 확대/축소 및 호버 기능이 있습니다. 다음 CodePen 데모는 100,000개의 데이터 포인트가 있는 차트를 생성합니다.
Stephen Wicklund의 프레젠테이션.
이 라이브러리의 일부 유용한 기능에는 여러 y축, 척도 및 그리드뿐만 아니라 다양한 유형의 척도(예: 선형 및 로그)가 포함됩니다. 이 라이브러리를 사용하여 선, 막대 및 영역 차트와 같은 유형을 만들 수 있습니다. 획, 채우기, 대시 등의 속성을 사용하여 차트 모양을 사용자 정의할 수도 있습니다.
하지만 이 라이브러리를 사용하지 못하게 할 수 있는 몇 가지 사항이 있습니다. 엄청난 성능 향상에는 대가가 따릅니다. 라이브러리는 내장된 전환 및 애니메이션을 제공하지 않습니다. 스크롤 및 확대/축소 동작을 처리하는 기본 동작도 없습니다. 그러나 이 기능을 제공할 수 있는 플러그인이 있습니다.
다양한 유형의 요구 사항을 충족하기 위해 노력하는 인기 있는 무료 JavaScript 차트 라이브러리 8개를 소개합니다. 각각에는 고유한 장점과 단점이 있으므로 귀하에게 적합하고 모든 요구 사항을 충족하는 것을 선택할 수 있습니다. 예를 들어 간단하고 사용하기 쉬운 것을 원하거나 Apex Charts를 사용하여 고급 차트를 만드는 경우 Chart.js가 좋습니다.
도서관 페이지에 게시된 다른 데모 중 일부를 확인하고 그 중 마음에 드는 기능을 제공하는 것이 무엇인지 확인하세요.
위 내용은 최고의 무료 JavaScript 차트 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
