HighCharts를 이용한 차트 구현에 대해서 알아본다.

1. ㈜유미테크
를
이용한 차트 구현
발표자 : 개발 1팀 김영석
2017-05-19

2. 목차
• HighCharts 란?
• HighCharts 특징
• HighCharts 차트 종류
• HighCharts 구성
• HighCharts 기본예제
– 'chart' 설정 예제
– 'title' 설정 예제
– 'x/yAxis' 설정 예제
– 'plotOptions' 설정예제
– 'tooltip' 설정 예제
– 'legend' 설정 예제
– 기타 예제
2

3. HighCharts 란?
• 순서 자바 스크립트로 작성된 차트 라이브러리
• Norway의 ‘Vik’이라는 작은 마을에 위치한
‘Highsoft’ 회사에서 2009년 출시
• 모바일 브라우저를 지원, 멀티터치 줌 지원
• Modern Browser는 SVG로, 이전 Browser는 VML로 그래프 작성
• Highstock, Highmaps의 기초가 됨
2017-05-19 3
Owner: Torstein Hønsi

4. HighCharts 특징
• Compatible
– Modern Browser 지원
• Pure JavaScript
• (Non-Commercial) Free
• 간단한 설치
• 심플한 설정 Syntax
• external data loading 가능
2017-05-19 4

5. HighCharts 차트 종류
2017-05-19 5
[ Line Chart ] [ Bar Chart ]
[ Pie Chart ] [ Area Chart ]

6. HighCharts 차트 종류
2017-05-19 6
[ Scatter Chart ] [ Gauge Chart ]
[ Polar Chart ] [ Etc… ]
https://www.highcharts.com/demo

7. HighCharts 구성
2017-05-19 7
title
subtitle
yAxis
xAxis
x/yAxis:title
credits
exporting
legend
tooltip

8. HighCharts 기본예제
Highcharts.chart('container', {
chart : {
type : 'bar'
},
title : {
text : 'Fruit Consumption'
},
xAxis : {
categories : ['Apples', 'Bananas', 'Oranges']
},
yAxis : {
title : {
text : 'Fruit eaten'
}
},
series : [{
name : 'Jane',
data : [1, 0, 4]
}, {
name : 'John',
data : [5, 7, 3]
}
]
});
2017-05-19 8
차트에 대한 전반적인 설정
차트 제목 설정
x축 설정
y축 설정
차트 데이터 작성
결과:

9. HighCharts 기본예제
'chart' 설정 예제
2017-05-19 9

10. • 'chart' 설정 예제 (http://jsfiddle.net/seoka35/52r36gvd)
HighCharts 기본예제
2017-05-19 10
chart : {
type : 'bar'
}
chart : {
type : 'column'
}

11. • 'chart' 설정 예제
HighCharts 기본예제
2017-05-19 11
chart : {
backgroundColor: "#CCCCCC"
}
chart : {
plotBackgroundColor: "#CCCCCC"
}

12. • 'chart' 설정 예제
HighCharts 기본예제
2017-05-19 12
chart : {
borderColor: "#CCCCCC",
borderWidth: 2
}
chart : {
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2
}

13. HighCharts 기본예제
'title' 설정 예제
2017-05-19 13

14. • 'title' 설정 예제
HighCharts 기본예제
2017-05-19 14
title : {
align: "left"
}
title : {
floating: true
}

15. • 'title' 설정 예제
HighCharts 기본예제
2017-05-19 15
title : {
style: {
color:'#FF00FF',
fontWeight:'bold'
}
}
title : {
x: 100,
y: 50
}

16. HighCharts 기본예제
'x/yAxis' 설정 예제
2017-05-19 16

17. • 'x/yAxis' 설정 예제
HighCharts 기본예제
2017-05-19 17
yAxis : {
gridLineColor:'#000000',
gridLineWidth:2
}
yAxis : {
lineColor: '#000000',
lineWidth: 2
}

18. • 'x/yAxis' 설정 예제
HighCharts 기본예제
2017-05-19 18
yAxis : {
min:2,
max:6
}
yAxis : {
tickInterval:1,
tikcAmount:16
}

19. • 'x/yAxis' 설정 예제 (http://jsfiddle.net/seoka35/jzg76jpj)
HighCharts 기본예제
2017-05-19 19
xAxis : {
title:{text:'xAxis Title'}
}
xAxis: {
crosshair:true
}

20. HighCharts 기본예제
'plotOptions' 설정 예제
2017-05-19 20

21. • 'plotOptions' 설정 예제
– 차트 데이터 영역에 대한 차트별 공통 설정
HighCharts 기본예제
2017-05-19 21
plotOptions: {
series: {
borderWidth: 2,
borderColor: 'red'
}
}
plotOptions: {
series: {
color: 'red'
}
}

22. • 'plotOptions' 설정 예제
HighCharts 기본예제
2017-05-19 22
plotOptions: {
series: {
dataLabels: {
enabled:true,
format:'{y} 개'
}
}
}

23. HighCharts 기본예제
'tooltip' 설정 예제
2017-05-19 23

24. • 'tooltip' 설정 예제
HighCharts 기본예제
2017-05-19 24
tooltip: {
backgroundColor:'#FCFFC5',
borderColor:'#FF0000',
borderRadius: 10,
borderWidth: 2
}
tooltip: {
formatter: function () {
return 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
}
}

25. • 'tooltip' 설정 예제 (http://jsfiddle.net/seoka35/rquoucst)
HighCharts 기본예제
2017-05-19 25
tooltip: {
formatter: function () {
var s = '<b>' + this.x + '</b>';
$.each(this.points, function () {
s += '<br/>' + this.series.name + ': ' + this.y + 'm';
});
return s;
},
shared: true
}

26. HighCharts 기본예제
'legend' 설정 예제
2017-05-19 26

27. • 'legend' 설정 예제
HighCharts 기본예제
2017-05-19 27
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
}
legend: {
backgroundColor: '#FCFFC5',
borderColor: '#C98657',
borderWidth: 1
}

28. HighCharts 기본예제
기타 예제
2017-05-19 28

29. • 기타 예제
HighCharts 기본예제
2017-05-19 29
credits: {
enabled: false
}
exporting: {
enabled: false
}

30. HighCharts 기본예제
• 더 자세한 설정은 HighCharts Options Reference 참고
(http://api.highcharts.com/highcharts)
2017-05-19 30

31. Reference
• HighCharts Official Site
(https://www.highcharts.com)
• Wikipedia, article 'HighCharts'
(https://en.wikipedia.org/wiki/Highcharts)
2017-05-19 31