Jumping Bytes and Hopping Bits
the church of tech
Menu

chart.js 예제 August 2, 2019

막대 차트는 다른 엔터티에 대한 단일 메트릭(예: 다른 회사에서 판매하는 자동차 수 또는 마을의 특정 연령대의 사람 수)를 비교하려는 경우에 유용합니다. bar에 유형 키를 설정하여 Chart.js에서 막대 차트를 만들 수 있습니다. 기본적으로 세로 막대가 있는 차트가 생성됩니다. 가로 막대가 있는 차트를 만들려면 형식을 가로Bar로 설정해야 합니다. 이러한 예제를 사용하려면 Chart.js: Chart.js는 웹 응용 프로그램에서 데이터를 플롯하는 데 도움이 되는 인기 있는 오픈 소스 라이브러리도 포함해야 합니다. 그것은 매우 사용자 정의, 하지만 모든 옵션을 구성 하는 어떤 사람들에 대 한 도전 남아. 간단한 예제에서 시작하여 이를 토대로 살펴보겠습니다. 마지막 단락이 약간 혼란스러웠다면 다음 예제에서는 정리하는 데 도움이 됩니다. 여기서 공부하는 속성은 서로 다른 유형의 그래픽 간에 공유되며 몇 가지 차이점이 있습니다. 예를 들어 원형 차트에서는 계열당 하나의 색상만 전달하는 대신 파이의 다른 조각이 서로 다른 색상을 가져야 하므로 색상 배열을 전달할 수 있습니다.

이 예제에서는 수익에 대한 줄선 차트와 혼합된 클라이언트에 대한 막대형 차트를 사용할 수 있습니다. 위의 예에서는 세계 행복 보고서의 행복 지수를 사용하여 국가의 Y 위치, 국제 통화 기금의 GDP 추정치를 사용하여 X 위치를 설정하고 인구 규모를 설정하여 거품의 크기를 설정합니다. (복사해야 하는 코드의 양을 줄이기 위해 예제 코드의 일부 데이터를 제거했습니다.) Chart.js는 오픈 소스 커뮤니티에서 높은 수준으로 적극적으로 유지됩니다. 최근에 버전 2.0에 도달했으며, 몇 가지 기본적인 구문 변경 사항으로 인해 코드를 보다 일관되게 만들고 모바일 지원을 제공합니다. 이 문서에서는 Chart.js 2.0을 사용 하 고 업데이트 된 구문을 사용 하 여 보겠습니다. 이 문서의 끝에서 Chart.js 2.0의 작동 방식을 볼 수 있는 기회를 제공한 후 1.0 -> 2.0 전환을 다루는 섹션과 온라인에서 이전 Chart.js 예제를 읽을 때 예상되는 사항들이 있습니다. 형식을 혼합하려면 차트의 기본 형식을 정의해야 하며 변경하려는 형식의 경우 개별 데이터 집합 내부의 변수 형식을 재정의해야 합니다. 예를 들어 기본 형식을 “bar”로 설정하지만 첫 번째 데이터 집합 내에서 “line”이라는 형식을 재정의합니다. 선도표는 선을 위해 유형을 설정하여 작성됩니다. 기본적으로 선에는 선과 x축 사이의 영역을 덮는 진한 투명 채우기가 함께 제공됩니다. 이러한 채우기는 다른 줄을 난독 처리하는 경향이 있으므로이 예제의 모든 데이터 집합에서 제거했습니다 (false 채우기).

마지막으로, 한스 로슬링이 가장 좋아하는 버블 차트가 있습니다. 버블 차트는 동시에 다른 데이터 포인트를 많이 시각화하는 데 적합 할 수 있습니다. 이 예제에서 모든 거품은 각 국가의 GDP, 행복 및 인구를 각각 표시하는 x 위치, y 위치 및 크기(r)의 세 가지 값으로 구성됩니다. 나중에 chart.js에 대해 더 자세히 읽으려면 의견에 알려주십시오. 모든 데이터 집합 개체 내의 각 데이터 배열에 여러 개체(x, y 및 x 설정)를 전달할 수 있지만 이 예제에서는 모든 거품에 고유한 색상과 레이블을 지정하기 때문에 배열당 하나의 개체만 사용합니다. 막대 차트는 (주로) 약간 다르게 보이는 단지 선도표입니다. 이전 예제의 한 줄을 변경하여 막대형 차트를 만들 수 있습니다. yAxesis 옵션의 개체인 축척에서 속성을 이 yAxes는 실제로 배열이며 다른 계열에 대해 여러 축척을 사용할 수 있습니다. 이 예제에서는 두 개의 Y 축을 사용합니다. 이러한 이유로, 우리는 각각에 대한 ID를 제공해야합니다. 첫 번째 Y축에는 id:”수익”과 두 번째 id:”클라이언트”가 있습니다. 이 코드가 강렬해 보이는 경우 걱정하지 마십시오! 모든 Chart.js 예제는 대부분의 경우 위의 형식을 따르므로 한 번만 학습하면 됩니다.

무슨 일이 일어나고 있는지 이해하기 위해 줄로 이동 합니다.

Categories: Uncategorized