20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석
Transcript of 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석
![Page 1: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/1.jpg)
㈜유미테크
를이용한차트구현
발표자 : 개발 1팀 김영석
2017-05-19
![Page 2: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/2.jpg)
목차
• HighCharts 란?
• HighCharts 특징
• HighCharts 차트 종류
• HighCharts 구성
• HighCharts 기본예제
– 'chart' 설정 예제
– 'title' 설정 예제
– 'x/yAxis' 설정 예제
– 'plotOptions' 설정예제
– 'tooltip' 설정 예제
– 'legend' 설정 예제
– 기타 예제
2
![Page 3: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/3.jpg)
HighCharts 란?
• 순서 자바 스크립트로 작성된 차트 라이브러리
• Norway의 ‘Vik’이라는 작은 마을에 위치한‘Highsoft’ 회사에서 2009년 출시
• 모바일 브라우저를 지원, 멀티터치 줌 지원
• Modern Browser는 SVG로, 이전 Browser는 VML로 그래프 작성
• Highstock, Highmaps의 기초가 됨
2017-05-19 3
Owner: Torstein Hønsi
![Page 4: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/4.jpg)
HighCharts 특징
• Compatible
– Modern Browser 지원
• Pure JavaScript
• (Non-Commercial) Free
• 간단한 설치
• 심플한 설정 Syntax
• external data loading 가능
2017-05-19 4
![Page 5: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/5.jpg)
HighCharts 차트 종류
2017-05-19 5
[ Line Chart ] [ Bar Chart ]
[ Pie Chart ] [ Area Chart ]
![Page 6: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/6.jpg)
HighCharts 차트 종류
2017-05-19 6
[ Scatter Chart ] [ Gauge Chart ]
[ Polar Chart ] [ Etc… ]https://www.highcharts.com/demo
![Page 7: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/7.jpg)
HighCharts 구성
2017-05-19 7
title
subtitle
yAxis
xAxis
x/yAxis:title
credits
exporting
legend
tooltip
![Page 8: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/8.jpg)
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축 설정
차트 데이터 작성
결과:
![Page 9: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/9.jpg)
HighCharts 기본예제
'chart' 설정 예제
2017-05-19 9
![Page 10: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/10.jpg)
• 'chart' 설정 예제 (http://jsfiddle.net/seoka35/52r36gvd)
HighCharts 기본예제
2017-05-19 10
chart : {
type : 'bar'
}
chart : {
type : 'column'
}
![Page 11: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/11.jpg)
• 'chart' 설정 예제
HighCharts 기본예제
2017-05-19 11
chart : {
backgroundColor: "#CCCCCC"
}
chart : {
plotBackgroundColor: "#CCCCCC"
}
![Page 12: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/12.jpg)
• 'chart' 설정 예제
HighCharts 기본예제
2017-05-19 12
chart : {
borderColor: "#CCCCCC",
borderWidth: 2
}
chart : {
plotBorderColor: "#CCCCCC",
plotBorderWidth: 2
}
![Page 13: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/13.jpg)
HighCharts 기본예제
'title' 설정 예제
2017-05-19 13
![Page 14: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/14.jpg)
• 'title' 설정 예제
HighCharts 기본예제
2017-05-19 14
title : {
align: "left"
}
title : {
floating: true
}
![Page 15: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/15.jpg)
• 'title' 설정 예제
HighCharts 기본예제
2017-05-19 15
title : {
style: {
color:'#FF00FF',
fontWeight:'bold'
}
}
title : {
x: 100,
y: 50
}
![Page 16: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/16.jpg)
HighCharts 기본예제
'x/yAxis' 설정 예제
2017-05-19 16
![Page 17: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/17.jpg)
• 'x/yAxis' 설정 예제
HighCharts 기본예제
2017-05-19 17
yAxis : {
gridLineColor:'#000000',
gridLineWidth:2
}
yAxis : {
lineColor: '#000000',
lineWidth: 2
}
![Page 18: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/18.jpg)
• 'x/yAxis' 설정 예제
HighCharts 기본예제
2017-05-19 18
yAxis : {
min:2,
max:6
}
yAxis : {
tickInterval:1,
tikcAmount:16
}
![Page 19: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/19.jpg)
• 'x/yAxis' 설정 예제 (http://jsfiddle.net/seoka35/jzg76jpj)
HighCharts 기본예제
2017-05-19 19
xAxis : {
title:{text:'xAxis Title'}
}
xAxis: {
crosshair:true
}
![Page 20: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/20.jpg)
HighCharts 기본예제
'plotOptions' 설정 예제
2017-05-19 20
![Page 21: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/21.jpg)
• 'plotOptions' 설정 예제
– 차트 데이터 영역에 대한 차트별 공통 설정
HighCharts 기본예제
2017-05-19 21
plotOptions: {
series: {
borderWidth: 2,
borderColor: 'red'
}
}
plotOptions: {
series: {
color: 'red'
}
}
![Page 22: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/22.jpg)
• 'plotOptions' 설정 예제
HighCharts 기본예제
2017-05-19 22
plotOptions: {
series: {
dataLabels: {
enabled:true,
format:'{y} 개'
}
}
}
![Page 23: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/23.jpg)
HighCharts 기본예제
'tooltip' 설정 예제
2017-05-19 23
![Page 24: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/24.jpg)
• '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>';
}
}
![Page 25: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/25.jpg)
• '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
}
![Page 26: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/26.jpg)
HighCharts 기본예제
'legend' 설정 예제
2017-05-19 26
![Page 27: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/27.jpg)
• 'legend' 설정 예제
HighCharts 기본예제
2017-05-19 27
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
}
legend: {
backgroundColor: '#FCFFC5',
borderColor: '#C98657',
borderWidth: 1
}
![Page 28: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/28.jpg)
HighCharts 기본예제
기타 예제
2017-05-19 28
![Page 29: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/29.jpg)
• 기타 예제
HighCharts 기본예제
2017-05-19 29
credits: {
enabled: false
}
exporting: {
enabled: false
}
![Page 30: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/30.jpg)
HighCharts 기본예제
• 더 자세한 설정은 HighCharts Options Reference 참고(http://api.highcharts.com/highcharts)
2017-05-19 30
![Page 31: 20170519 tech day-3rd-highcharts를 이용한 차트 구현-김영석](https://reader031.fdocuments.net/reader031/viewer/2022013113/5a6e41587f8b9a665f8b5537/html5/thumbnails/31.jpg)
Reference
• HighCharts Official Site (https://www.highcharts.com)
• Wikipedia, article 'HighCharts' (https://en.wikipedia.org/wiki/Highcharts)
2017-05-19 31