대화 형 차트를 작성하는 9 개의 자바 스크립트 라이브러리
그래서 많은 변수를 가지고 수많은 데이터를 손에 가지고 있습니다. 다른 변수에 어떻게 든 중계해야합니다. 원시적이고 조직화되지 않은 데이터는 이해하기 어려울 것입니다. 이것이 차트에서 도움이 필요한 이유입니다. 웹 디자인, 차트는 데이터 시각화를위한 최상의 도구 중 하나입니다.. 눈에 쉽고 비교적 쉽게 설정할 수 있습니다..
하지만 한 걸음 더 나아가 보자. 애니메이션 및 상호 작용을 차트에 추가하십시오., 독자가 차트에서 새로운 것을 배울 수있을뿐 아니라 차트를 통해 놀 수 있습니다. 많은 JS 라이브러리 덕분에 실제로 소리보다 쉽습니다. 그들을 체크하자..
1. 차트 JS
Chart.js 선 차트, 막대 차트, 레이더 차트, 극지 영역 차트, 원형 및 도넛 형 차트 등 6 가지 유형으로 차트를 작성할 수있는 종속성이없는 라이브러리입니다. 또한 차트 유형에 따라 라이브러리가 분리되어 있으므로 페이지가 필요하지 않은 페이지로 가득 채워지지 않습니다. 반응 형 디자인을 지원하며 색상이나 애니메이션과 같은 변수를 쉽게 변경하여 차트 인터페이스를 사용자 정의 할 수 있습니다..
2. Chartist JS
Chartist JS SVG를 사용하는 반응 형 차트를 작성하는 훌륭한 라이브러리입니다. Chartist는 응답 성 외에도 CSS 스타일 및 JS로 제어 할 수있는 명확한 구분을 통해 유연성을 제공합니다. 사용자 정의를 쉽게하기 위해 SASS 파일이 포함되어 있습니다. 여기서 가장 중요한 것은 Chartist 애니메이션 API 인 SMIL을 사용하여 차트에 애니메이션을 적용하는 무한한 옵션이 있다는 것입니다. SMIL은 추가 애니메이션 옵션을 제공합니다..
3. C3 JS
C3 JS D3 JS를 기반으로 차트를 작성하는 라이브러리입니다. D3 JS로 차트를 작성하는 데 필요한 코드를 마무리하므로 D3 코드 작성을 건너 뛰고 데이터를 입력하면됩니다. C3에는 차트를 쉽게 제어 할 수있는 다양한 API가 있습니다. 차트를 사용자 정의하려면 주어진 CSS 클래스에 사용자 정의 스타일을 정의하십시오. 간단한 선 차트에서 계측 차트로 차트를 작성하십시오. 라이브러리 작동 방식을 보려면이 페이지를 확인하십시오..
4. 플롯
플로트 시리즈 켜기 또는 끄기, 데이터 요소 상호 작용, 이동, 확대 / 축소 등과 같은 대화 형 요소로 차트를 만드는 jQuery 플러그인입니다. Flot에는 다양한 차트 유형 옵션이 있으며 차트에서 더 많은 기능을 원할 경우 여기에서 사용할 수있는 플러그인도 있습니다. 차트는 HTML 캔버스를 지원하는 브라우저에서 잘 작동합니다..
5. EC 하트
Echart 여러 차트 유형을 지원하고, 큰 데이터 (직교 차트에서 최대 200,000 개의 데이터 포인트 플로팅)를 처리하고, 로밍 규모가 있으며, 여러 차트간에 데이터를 손쉽게 추출, 통합 및 교환 할 수있는 중국의 놀랍도록 포괄적 인 라이브러리입니다. 하나는 하나의 데이터 유형에서 다른 데이터 유형으로 쉽게 전환 할 수 있으며, 훨씬 더 많이.
6. 애교
Peity 귀하의 웹 페이지에 미니 차트를 추가합니다. 요소를 미니로 변환하는 작은 jQuery 플러그인입니다. svg 선, 막대, 도넛 형 또는 파이 차트. 요소를 만들고 같은 값을 주면됩니다. 1/5 전화 걸기 연민 ( '파이') 그 요소에 미니 파이 차트를 만들 수 있습니다. 예를 들어 1/5 만 강조 표시된 도넛 형 차트를 만들려면 HTML을 사용합니다.
1/5
차트 색상, 반지름, 너비 및 높이를 사용자 정의 할 수 있지만 기본적으로 작은 크기로 표시됩니다..
7. DC JS
DC JS 사용 된 엔진 측면에서 C3 JS와 유사합니다. 그들은 둘 다 D3 라이브러리를 사용하여 SVG에서 차트를 렌더링합니다. DC JS는 브라우저 및 모바일 장치에 대한 데이터 및 분석을 시각화 할 수 있도록 작성되었습니다. D3 JS를 활용하므로 차트에 사용자 상호 작용을 추가 할 수 있습니다. DC JS는 단순함에서 높은 복잡성까지 차트를 만드는 강력한 라이브러리입니다..
8. 구글 차트
Google 차트를 통해 Google 시각화 API를 사용하여 대화 형 차트 및 데이터 도구를 만들 수 있습니다. Google 차트의 데이터 시각화 기능을 확인하는 차트 갤러리가 있습니다. 우선 웹 페이지에 간단한 자바 스크립트를 삽입하여 필요한 Google Chart 라이브러리를로드하십시오. 그런 다음 차트에 표시 할 데이터를 나열하고 차트 옵션을 통해 몇 가지 사용자 정의를 만듭니다. 마지막으로 ID가있는 차트 개체를 만들고 웹 페이지에서 NVD3 D3 JS로 구축 된 재사용 가능한 차트 및 차트 구성 요소 집합입니다. 이 라이브러리는 따라서 차트를 쉽게 만들 수 있도록 도와주는 '템플릿'입니다. NVD3으로 제작 된 많은 샘플 차트를 확인하십시오..
9. NVD3
지금 읽기 : 대화식 및 사용자 정의 된 맵을 생성하는 JavaScript 라이브러리
