Highchart(하이차트) 구현하기-2 <<Highchart Demo>>

이전 게시글에서는 Highchart를 이용해서 간단한 column 차트를 만들고 이해하였습니다.

이번 게시글에서는 Highchart 홈페이지의 데모를 활용해서 하이차트의 속성들을 살펴보고, 수정해보겠습니다!

 

우선 Highchart 홈페이지 - https://www.highcharts.com/ 에 접속합니다. 

Interactive javascript charts library

 

2. 상단 오른쪽 'Demo' 를 마우스 오버하여 'Highchart JS Demo' 을 클릭합니다. 

 

3. 이 게시글에서는 Line charts의 첫번째 Demo를 활용하겠습니다.

클릭해주세요!

 

4. 'EDIT IN JSFADDLE' 을 클릭하여 코드를 살펴보겠습니다.

5. 해당 차트의 JS 코드입니다.

'title', 'subtitle', 'yAxis' 속성에 대한 설명은 이전 게시글에 적어놓았습니다. 

 

본격적으로 차트의 속성을 살펴보도록 하겠습니다!

 

6. 'xAxis.accessibility.rangeDescription' 는 x축 범위에 대한 설명입니다. 

 

7. 'legend.layout' :  범례 정렬 속성입니다. 

 

8. 'legend.align' : 범례 위치 속성

 

 

9. 'legend.verticalAlign' : 범례 수직 위치 속성

 

 

10. 'plotOptions.series.label.connectorAllowed' : 레이블 연결선

 

11. 'plotOptions.series.pointStart' : X축의 스케일 범위는 실제 데이터 개수에 따라 변하며 x축을 라벨링을 해줍니다.

 

12. responsive :다양한 화면 또는 차트 크기에 반응할 일련의 규칙 집합입니다.