React 애플리케이션을 위한 상위 8개 차트 라이브러리

상위 8개의 React 차트 라이브러리와 필요에 맞는 라이브러리를 선택하는 방법에 대해 알아보세요. 차트 작성 및 데이터 표시 프로세스를 단순화하는 상위 8개의 인기 있는 React 차트 라이브러리입니다.

데이터는 어디에나 있으며 점점 더 우리 삶의 중요한 부분이 되고 있습니다. 우리는 매일 데이터를 수집, 전송 및 분석합니다.

데이터 자체는 시각적으로 매력적이지 않지만 그렇게 만들 수는 있습니다. 차트는 데이터를 심미적으로 보기 좋고 이해하고 유지하기 쉽게 만듭니다. 초점을 맞추는 시각 요소가 있을 때 정보를 더 쉽게 접할 수 있기 때문입니다.

웹 사이트나 애플리케이션을 구축할 때 작업에 차트를 표시하는 방법은 무수히 많습니다. 처음부터 차트를 만들거나 사용 가능한 많은 React 차트 라이브러리를 사용할 수 있습니다. 이 가이드에서는 React 애플리케이션의 상위 차트 라이브러리를 비교합니다.

React 차트 라이브러리를 사용하는 이유는 무엇입니까?

차트 라이브러리는 차트 및 기타 데이터 시각화를 쉽게 구축할 수 있도록 설계되었습니다. 소규모 프로젝트에서 작업할 때 처음부터 차트를 만들 정도로 간단합니다. 그러나 다른 유형의 데이터를 표시해야 하는 프로젝트에서 작업하는 경우 차트 라이브러리를 사용하는 것이 더 유용할 수 있습니다.

오늘날의 React 생태계에는 대화형, 반응형, 애니메이션 차트를 쉽고 효율적으로 만들 수 있도록 설계된 많은 라이브러리가 있습니다.

더 이상 고민하지 않고 상위 8개의 React 차트 라이브러리를 비교하여 기능, 문서화, 커뮤니티 채택 및 사용자 정의 가능성을 포함한 기준에 대해 각각을 평가해 보겠습니다. 가장 인기 있고 널리 채택된 몇 가지 React 차트 라이브러리에 초점을 맞출 것입니다.

Recharts

GitHub 에서 19,000개의 별을 보유한 Recharts는 D3 및 React로 구축된 재정의된 차트 라이브러리입니다. 가장 인기 있는 React용 차트 라이브러리 중 하나인 Recharts는 이해하기 쉬운 훌륭한 문서와 훌륭한 프로젝트 관리자를 보유하고 있습니다.

Recharts는 사용자가 재사용 가능한 React 구성 요소로 차트를 작성할 수 있도록 하여 React의 구성 요소 원칙을 따릅니다. Recharts는 기존 구성 요소의 소품을 조정하거나 사용자 지정 항목을 추가하여 사용자 지정할 수 있는 아름다운 차트를 즉시 제공합니다. SVG에만 그리기 지원이 있으며 모바일은 지원하지 않습니다. 차트는 기본적으로 응답하지 않지만 래퍼 구성 요소를 사용하여 응답하도록 만들 수 있습니다.

Recharts는 출시된 지 꽤 되었기 때문에 많은 사용자와 대규모 커뮤니티를 보유하고 있습니다. CDN을 사용하거나 npm 또는 yarn으로 설치하여 이 차트 라이브러리를 쉽게 시작할 수 있습니다.

• 반응 구성 요소 구문
• D3 기준
• SVG 지원/Canvas 지원 없음
• GitHub 별: 19K+
• npm 다운로드: 1.1M+
• 오픈 소스 커뮤니티의 지원

react-chartjs-2

React에서 Chart.js를 사용한 적이 있다면 react-chartjs-2를 사용할 때 학습 곡선을 경험하지 않아도 됩니다 . react-chartjs-2는 널리 사용되는 JavaScript Chart.js 라이브러리의 React 래퍼입니다. Chart.js의 많은 기능을 react-chartjs-2에서 사용할 수 있습니다.

react-chartjs-2는 Canvas에 대해서만 그리기를 지원하며 클라이언트 측에서 렌더링합니다. 글을 쓰는 시점에 GitHub 에 5.7K 이상의 별이 있습니다 .

react-chartjs-2는 애니메이션을 지원하며 제공하는 대부분의 차트는 기본적으로 반응형입니다. 라이브러리는 기본적으로 다양한 유형의 차트 스타일에 대한 일부 구성 요소를 제공하며 사용자 지정도 허용합니다.

react-chartjs-2 자체에 대한 자세한 문서는 없지만 웹사이트에서는 다양한 차트 유형 과 이를 시작하는 방법을 보여줍니다. 또한 Chart.js에는 상세하고 이해하기 쉬운 문서가 있습니다.

이 라이브러리는 모든 최신 브라우저에서 정말 잘 작동하며 대규모 사용자 커뮤니티와 훌륭한 관리자도 있습니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.

• 반응 구성 요소 구문
• Chart.js 기반
• 캔버스 지원/SVG 지원 안 함
• GitHub 별: 5.7K+
• npm 다운로드: 770K+
• 오픈 소스 커뮤니티의 지원

Victory

공식 문서 에 따르면 Victory는 "대화형 데이터 시각화를 구축하기 위한 구성 가능한 React 구성 요소의 독단적이지만 완전히 무시할 수 있는 생태계"입니다.

목록에 있는 다른 많은 React 차트 라이브러리와 마찬가지로 Victory는 React 및 D3로 구축되었습니다. 완벽하게 사용자 정의할 수 있는 다양한 차트가 즉시 제공됩니다.

Victory에는 강력하고 자세한 문서가 있어 라이브러리를 초보자에게 친숙하고 쉽게 시작할 수 있습니다. SVG에 대한 그리기 지원과 사용자 정의할 수 있는 고품질 애니메이션(적어도 어느 정도는)이 특징입니다. Victory는 또한 화면 크기에 관계없이 잘 작동하는 반응형 차트를 제공합니다.

이 라이브러리는 작성 시점에 GitHub에서 10,000개 이상의 별을 보유하고 있으며 Formidable 의 개발자가 유지 관리합니다 .

Victory를 사용하는 주요 이점은 iOS 및 Android 애플리케이션을 빌드하는 데에도 사용할 수 있다는 것입니다. Victory 에는 웹 버전과 거의 동일한 API를 사용하는 React Native 버전이 있기 때문입니다 .

• React 구성 요소 구문/React Native 지원
• D3 기준
• SVG 지원/Canvas 지원 없음
• GitHub 별: 10K+
• npm 다운로드: 175K+
• Formidable Labs 의 지원

Nivo

다른 많은 React 차트 라이브러리와 마찬가지로 Nivo는 React 및 D3로 구축되었으며 선택할 수 있는 다양한 차트 유형과 디자인을 제공합니다. 라이브러리는 HTML, Canvas 및 SVG 차트를 제공하고 클라이언트 및 서버 측 렌더링을 지원하며 애니메이션과 잘 작동합니다.

Nivo는 필요한 경우 별 어려움 없이 사용자 정의할 수 있는 다양한 종류의 아름다운 차트를 제공합니다. Nivo에서 제공하는 많은 차트는 기본적으로 반응형이므로 다양한 화면 크기에 잘 맞습니다. Nivo는 또한 React Motion 으로 구동되는 모션 및 전환을 지원합니다 .

작성 당시 Nivo에는 11,000개가 넘는 GitHub 스타가 있습니다 . 번성하는 커뮤니티와 참여하는 관리자를 자랑하며 쉽게 시작할 수 있도록 자세한 문서가 포함된 아름다운 웹사이트가 있습니다. Nivo는 npm 또는 yarn을 사용하여 설치할 수 있습니다.

• 반응 구성 요소 구문
• D3 기준
• SVG, 캔버스 및 HTML 지원
• React Motion 으로 구동되는 애니메이션
• GitHub 별: 11K
• npm 다운로드: 336K+
• 오픈 소스 커뮤니티의 지원

React-Vis

Uber가 만들고 React 및 D3로 구축한 React-Vis는 시작하기 가장 쉬운 React 차트 작성 라이브러리 중 하나입니다.

React 구성 요소로 작업한 적이 있다면 React-Vis에서 제공하는 구성 요소가 소품, 하위 및 콜백과 유사한 방식으로 작동하기 때문에 쉽게 작업할 수 있습니다.

React-Vis를 사용하면 라인, 바, 파이 등 다양한 유형의 차트를 만들 수 있습니다. 매력적이고 사용자 정의 가능한 차트를 즉시 제공하며 React Motion으로 구동되는 애니메이션 차트를 지원합니다.

React-Vis는 Canvas 및 SVG에 대한 그리기 지원도 제공합니다. React-Vis를 사용하기 위해 데이터 시각화 라이브러리에 대한 깊은 지식이 필요하지 않습니다. 이해하기 쉬운 설명서만으로도 시작하기에 충분합니다.

• 반응 구성 요소 구문
• D3 기준
• SVG 및 캔버스 지원
• GitHub 별: 8K+
• npm 다운로드: 1.2M+
• Uber 지원

ECharts

ECharts는 Apache에서 만든 차트 라이브러리입니다. 경량 캔버스 라이브러리인 ZRender 위에 구축되어 SVG와 캔버스 지원을 모두 제공합니다.

일반적인 차트 유형 외에도 ECharts는 Sankey 다이어그램, 그래프 및 히트맵과 같은 몇 가지 고유한 차트 유형을 제공합니다. 200개 이상의 데이터 시각화 유형과 함께 ECharts는 광범위한 사용자 지정 옵션을 제공하고 테마 및 확장을 지원합니다. 또한 애니메이션을 지원하며 기본적으로 반응형입니다. ECharts는 또한 대규모 사용자 커뮤니티를 보유하고 있으며 Apache의 지원을 받습니다.

광범위한 사용자 정의 옵션과 테마 및 확장 지원을 통해 ECharts는 상세한 데이터 시각화로 아름답고 유익한 차트를 만들고자 하는 개발자에게 탁월한 선택입니다.

• 바닐라 자바스크립트 구문
• 최고 수준의 애니메이션 및 미학
• 테마 및 확장 — 밝은 테마와 어두운 테마도 지원합니다.
• SVG 및 캔버스 지원
• GitHub 별: 54K+
• npm 다운로드: 458K+
• 아파치 지원

BizCharts

BizCharts는 Alibaba에서 구축한 데이터 시각화 라이브러리입니다. AntV에서 구축한 데이터 시각화 라이브러리인 G2 위에 구축되었습니다.

BizCharts는 다양한 차트 유형을 제공하며 SVG와 캔버스를 모두 지원합니다. 또한 다양한 사용자 정의 옵션을 제공하고 테마 및 확장을 지원합니다. 영어로 된 문서를 찾지 못할 수도 있지만 BizCharts 라이브러리는 사용하기 쉽고 활발한 사용자 커뮤니티를 보유하고 있습니다.

• 반응 구성 요소 구문
• D3 기준
• SVG 지원/Canvas 지원 없음
• GitHub 별: 6K+
• npm 다운로드: 23K+
• 알리바바의 지원

Visx

Visx 는 Airbnb에서 구축한 데이터 시각화 라이브러리입니다. D3 위에 구축되었으며 다양한 차트 유형을 제공하고 SVG와 Canvas를 모두 지원합니다.

최소한의 디자인으로 Visx는 미학적으로 만족스럽습니다. API는 매우 사용자 정의가 가능하며 그 위에 자신만의 차트 작성 라이브러리를 구축할 수 있습니다.

Visx는 또한 성능에 중점을 두고 번들 크기를 작게 유지합니다. 스타일 구성 요소 및 감정과 같은 CSS-in-JS 라이브러리와 잘 작동합니다.

• 반응 구성 요소 구문
• D3 기준
• SVG 지원/Canvas 지원 없음
• GitHub 별: 16K+
• npm 다운로드: 295K+
• 에어비앤비 지원

결론

하나의 기사에서 검토할 수 있는 것보다 React에 사용할 수 있는 차트 라이브러리가 더 많지만 위에서 설명한 몇 가지 라이브러리는 React 커뮤니티에서 가장 널리 채택되고 사랑받는 라이브러리 중 하나입니다.

다음은 위에서 언급한 라이브러리의 채택 및 인기에 대한 간략한 요약입니다.

React 프로젝트에 사용할 차트 라이브러리를 결정할 때 개발자가 특정 최종 결과를 달성하는 데 도움이 되도록 만들어졌다는 점을 기억하세요. 귀하의 프로젝트에 가장 적합한 것을 결정하기 전에 기능과 제공하는 것을 비교하십시오. 일부 차트 라이브러리는 소규모 프로젝트에 이상적일 수 있지만 다른 차트 라이브러리는 더 복잡한 프로젝트에 더 적합할 수 있습니다.

궁극적으로 사용할 React 차트 라이브러리의 선택은 프로젝트 요구 사항과 선호하는 기능 유형에 따라 다릅니다.

출처: https://blog.logrocket.com

#react #reactjs