chartjs 예제

이 예제에서는 수익에 대한 줄선 차트와 혼합된 클라이언트에 대한 막대형 차트를 사용할 수 있습니다. 막대 차트는 다른 엔터티에 대한 단일 메트릭(예: 다른 회사에서 판매하는 자동차 수 또는 마을의 특정 연령대의 사람 수)를 비교하려는 경우에 유용합니다. bar에 유형 키를 설정하여 Chart.js에서 막대 차트를 만들 수 있습니다. 기본적으로 세로 막대가 있는 차트가 생성됩니다. 가로 막대가 있는 차트를 만들려면 형식을 가로Bar로 설정해야 합니다. yAxesis 옵션의 개체인 축척에서 속성을 이 yAxes는 실제로 배열이며 다른 계열에 대해 여러 축척을 사용할 수 있습니다. 이 예제에서는 두 개의 Y 축을 사용합니다. 이러한 이유로, 우리는 각각에 대한 ID를 제공해야합니다. 첫 번째 Y축에는 id:”수익”과 두 번째 id:”클라이언트”가 있습니다. Chart.js는 웹 응용 프로그램에서 데이터를 플롯하는 데 도움이되는 인기있는 오픈 소스 라이브러리입니다. 그것은 매우 사용자 정의, 하지만 모든 옵션을 구성 하는 어떤 사람들에 대 한 도전 남아. 간단한 예제에서 시작하여 이를 토대로 살펴보겠습니다.

이 기사에서는 Chart.js라는 자바 스크립트 차트 라이브러리를 소개합니다. 6가지 세련된 예제를 사용하여 Chart.js를 사용하여 웹 사이트의 데이터를 시각화하고 필요에 맞게 구성하는 방법을 살펴보겠습니다. Chart.js는 오픈 소스 커뮤니티에서 높은 수준으로 적극적으로 유지됩니다. 최근에 버전 2.0에 도달했으며, 몇 가지 기본적인 구문 변경 사항으로 인해 코드를 보다 일관되게 만들고 모바일 지원을 제공합니다. 이 문서에서는 Chart.js 2.0을 사용 하 고 업데이트 된 구문을 사용 하 여 보겠습니다. 이 문서의 끝에서 Chart.js 2.0의 작동 방식을 볼 수 있는 기회를 제공한 후 1.0 -> 2.0 전환을 다루는 섹션과 온라인에서 이전 Chart.js 예제를 읽을 때 예상되는 사항들이 있습니다. 모든 데이터 집합 개체 내의 각 데이터 배열에 여러 개체(x, y 및 x 설정)를 전달할 수 있지만 이 예제에서는 모든 거품에 고유한 색상과 레이블을 지정하기 때문에 배열당 하나의 개체만 사용합니다. 예를 들어 위의 그래프를 생성하기 위해 두 개의 막대로 설정하고 두 개의 집합을 줄로 설정하고 차트 개체의 형식은 막대로 설정된 네 개의 데이터 개체가 있습니다.