Chartist.js는 아름다운 반응형 차트를 제공합니다. ChartJS와 마찬가지로 Chartist.js는 고가의 자바 스크립트 차트 라이브러리를 사용하여 좌절 한 커뮤니티의 산물입니다. SVG를 사용하여 차트를 렌더링합니다. CSS3 미디어 쿼리 및 Sass를 통해 제어 및 사용자 지정할 수 있습니다. 또한 Chartist.js는 최신 브라우저에서만 작동하는 멋진 애니메이션을 제공합니다. 표선 차트를 사용하면 각 데이터 집합에 대해 여러 속성을 지정할 수 있습니다. 특정 데이터 집합에 대한 표시 속성을 설정하는 데 사용됩니다. 예를 들어 선의 색상은 일반적으로 이러한 방식으로 설정됩니다. 모든 차트와 함께 브랜드 버전은 무료로 시도 할 수 있지만 워터 마크가없는 출력의 경우 비즈니스 크기에 따라 ZingChart의 유료 라이센스 중 하나를 구입해야합니다. jChart는 SVG 기반, 벡터 모양의 원형 및 도넛 형 차트를 렌더링하기위한 사용하기 쉬운 jQuery 플러그인으로 각 값을 원형 또는 도넛의 일부로 표시합니다.

막대 차트 선 차트 원형 차트 레이더 차트 극지 영역 도넛 차트 수평 막대 그룹화 된 차트 혼합 차트 버블 차트 amCharts는 의심 할 여지없이 거기 밖으로 가장 아름다운 차트 라이브러리 중 하나입니다. 고급 데이터 시각화를 허용하는 차트와 지리적 맵(지도 차트)을 모두 제공합니다. 위의 예에서는 세계 행복 보고서의 행복 지수를 사용하여 국가의 Y 위치, 국제 통화 기금의 GDP 추정치를 사용하여 X 위치를 설정하고 인구 규모를 설정하여 거품의 크기를 설정합니다. (복사해야 하는 코드의 양을 줄이기 위해 예제 코드의 일부 데이터를 제거했습니다.) 가로 막대 차트는 유형을 가로막대로 설정하여 만들어집니다. 다른 모든 측면에서 일반 막대 차트와 동일하며 동일한 구성으로 작동합니다. 여러 차트를 혼합하고 서로 위에 오버레이 할 수 있습니다. 이 작업은 형식을 막대로 설정한 다음(예: 혼합 또는 선이 막대여야 함) 데이터 집합 배열의 모든 데이터 집합 개체에 대해 막대 유형을 설정하여 수행됩니다. 꽤 좋은 목록입니다. 어떤 이유로, 나는 항상 D3로 다시 가을 … 고객은 항상 미친 것과 99 %의 기회를 다른 그래프 라이브러리에서 지원되지 않는 것을 요청하지만 D3은 좋은 유연성을 제공합니다.

내 조언은 당신이 이제까지 차트를 처리하는 경우 D3를 배우는 것입니다.. 나를 믿으세요.. 당신은 그것을 어떤 식으로든 사용할 것입니다. ChartJS 차트는 기본적으로 반응합니다. 그들은 모바일 및 태블릿에서 잘 작동합니다. 상자 (라인, 바, 레이더, 도넛과 파이, 극지 지역, 거품, 산란, 지역) 및 그들을 혼합 할 수있는 능력) 상자 밖으로 차트의 8 가지 유형이 있습니다. 모든 차트는 애니메이션및 사용자 정의 할 수 있습니다. Chartist.js 예제 페이지에서 다양한 유형의 차트를 탐색하고 재생할 수 있습니다. 차트는 대화형이며 즉석에서 편집할 수 있습니다. 이 기사에서는 그래프와 차트에 가장 적합한 JavaScript 라이브러리를 보여 드리겠습니다. 이러한 라이브러리는 향후 프로젝트에 맞게 아름답고 사용자 정의 가능한 차트를 만드는 데 도움이 됩니다.

선도표는 선을 위해 유형을 설정하여 작성됩니다. 기본적으로 선에는 선과 x축 사이의 영역을 덮는 진한 투명 채우기가 함께 제공됩니다. 이러한 채우기는 다른 줄을 난독 처리하는 경향이 있으므로이 예제의 모든 데이터 집합에서 제거했습니다 (false 채우기). 거기에 다른 차트 및 그래프 라이브러리가 많이 있습니다. 여기에 체크 아웃 할 가치가 몇 가지 있습니다 : Calmosaic (캘린더 모자이크)는 동적으로 타임 계열 데이터를 표현하기위한 사용자 정의 캘린더 히트 맵을 렌더링 jQuery 플러그인입니다. Github의 기여 도표에서 영감을 받았습니다. amChart의 무료 버전은 모든 차트의 상단에 자사의 웹 사이트에 백링크를 떠날 것이다. 모든 데이터 집합 개체 내의 각 데이터 배열에 여러 개체(x, y 및 x 설정)를 전달할 수 있지만 이 예제에서는 모든 거품에 고유한 색상과 레이블을 지정하기 때문에 배열당 하나의 개체만 사용합니다.

원형 차트는 원형을 원형으로 설정하여 만들어집니다. 도넛형 차트와 거의 동일하며 동일한 구성(형식 변경에서 일부)으로 작동합니다.