[Highcharts] highchart 차트 개념이해

다음 주부터 프런트엔드 개발자로 일을 하게 되었다. 

 

그동안 PM으로 개발자분들에게 작업을 구걸하는(?) 일만 하다가 직업 코드를 짜는 입장이 되니, 

 

기분이 싱숭생숭하다. 

보아하니 highcharts 라이브러리로 데이터 시각화 작업을 많이 하는 듯하여, 

 

관련 라이브러리에 대해 본격적으로 공부해 보려고 한다. 

 

우선 highcharts 라이브러리는 각종 지도나 그래프 등 차트를 자바스크립트(혹은 타입 스크립트)를 이용해 프로그래밍적으로 쉽게 구현할 수 있도록 각종 기능을 지원하는 라이브러리다. 대충 코드를 훑어보니 객체 형식으로 개발자가 쉽게 차트를 만들 수 있도록 구현해놓은 점이 눈에 띄었다. 

 

이번 포스팅에서는 highcharts 라이브러리에서는 차트를 어떻게 구성하고 명명하는지 개념을 알아보자. 

 

---

Understanding Highcharts

Highcharts가 어떻게 작동되는지 알려면, 차트의 다양한 구성부분과 개념에 대해 아는 것이 중요하다. 

 

아래 이미지는 차트의 주요 개념을 설명한다. 

 

Title

차트를 설명하는 글이다. 주로 차트의 상단에 위치한다. 

 

Series

차트상에 표시되는 하나 또는 이상의 데이터이다. 

 

Tooltip

차트의 시리즈 위에 마우스를 올리거나 가르키면, 차트의 특정 부분을 설명하는 툴팁을 확인할 수 있다. 

 

Legend

레전드는 데이터 차트내 데이터 시리즈를 표시하고 하나 혹은 이상의 시리즈를 표시하거나 해제할 수 있다. 

 

Axes

cartesian line 차트와 column 차트와 같이 대다수의 차트들은, 데이터를 측정하고 카테고라이즈 하기 위해 두 개의 축을 가진다: 수직축(y 축) 그리고 평행 축 (x 축). 3D 차트는 깊이 축(z 축)이라고 불리는 세 개의 축을 가진다. Radar 차트라 고도 불리는 Polar 차트는 하나의 축만을 가진다. Sppedometer 차트로도 불리는 Gauge 차트는 하나의 축 값만을 가진다. Pie차트의 경우 축이 없다.