chart.js 예제

여기서 공부하는 속성은 서로 다른 유형의 그래픽 간에 공유되며 몇 가지 차이점이 있습니다. 예를 들어 원형 차트에서는 계열당 하나의 색상만 전달하는 대신 파이의 다른 조각이 서로 다른 색상을 가져야 하므로 색상 배열을 전달할 수 있습니다. 이러한 예제를 사용하려면 Chart.js: 위의 그래프를 생성하려면 두 개의 막대로 설정하고 두 개의 줄로 설정된 데이터 개체가 있고 두 개의 데이터 개체는 막대로 설정되어 있습니다. 모든 데이터 집합 개체 내의 각 데이터 배열에 여러 개체(x, y 및 x 설정)를 전달할 수 있지만 이 예제에서는 모든 거품에 고유한 색상과 레이블을 지정하기 때문에 배열당 하나의 개체만 사용합니다. 마지막으로, 한스 로슬링이 가장 좋아하는 버블 차트가 있습니다. 버블 차트는 동시에 다른 데이터 포인트를 많이 시각화하는 데 적합 할 수 있습니다. 이 예제에서 모든 거품은 각 국가의 GDP, 행복 및 인구를 각각 표시하는 x 위치, y 위치 및 크기(r)의 세 가지 값으로 구성됩니다. 막대 차트는 다른 엔터티에 대한 단일 메트릭(예: 다른 회사에서 판매하는 자동차 수 또는 마을의 특정 연령대의 사람 수)를 비교하려는 경우에 유용합니다. bar에 유형 키를 설정하여 Chart.js에서 막대 차트를 만들 수 있습니다.

기본적으로 세로 막대가 있는 차트가 생성됩니다. 가로 막대가 있는 차트를 만들려면 형식을 가로Bar로 설정해야 합니다. 차트 형식을 혼합Chart.js는 우리가 같은 캔버스에 차트의 두 가지 유형을 혼합 할 수 있습니다. 레스토랑 예제로 돌아가보겠습니다. 이제 우리는 우리가 매일 얼마나 많은 고객을 가지고 있었는지 분석하고 싶지만 여전히 수익을 보고 싶습니다. 형식을 혼합하려면 차트의 기본 형식을 정의해야 하며 변경하려는 형식의 경우 개별 데이터 집합 내부의 변수 형식을 재정의해야 합니다. 예를 들어 기본 형식을 « bar »로 설정하지만 첫 번째 데이터 집합 내에서 « line »이라는 형식을 재정의합니다. 선도표는 선을 위해 유형을 설정하여 작성됩니다. 기본적으로 선에는 선과 x축 사이의 영역을 덮는 진한 투명 채우기가 함께 제공됩니다. 이러한 채우기는 다른 줄을 난독 처리하는 경향이 있으므로이 예제의 모든 데이터 집합에서 제거했습니다 (false 채우기). Chart.js는 웹 응용 프로그램에서 데이터를 플롯하는 데 도움이되는 인기있는 오픈 소스 라이브러리입니다.

그것은 매우 사용자 정의, 하지만 모든 옵션을 구성 하는 어떤 사람들에 대 한 도전 남아. 간단한 예제에서 시작하여 이를 토대로 살펴보겠습니다. 기본 구현:간단 하 게 하기 위해, 라이브러리의 CDN 버전을 사용 하려고. 그러나 React 또는 Angular와 함께 사용할 계획이라면 npm 패키지를 사용하여 npm 설치 chart.js –save를 통해 설치하는 것이 좋습니다. 배열을 전달하는 경우(아래 예제와 같이) 색상은 해당 배열에서 동일한 인덱스를 공유하는 레이블과 번호에 할당됩니다.