㈜유미테크

를이용한차트구현

발표자 : 개발 1팀 김영석

2017-05-19

목차

• HighCharts 란?

• HighCharts 특징

• HighCharts 차트 종류

• HighCharts 구성

• HighCharts 기본예제

– 'chart' 설정 예제

– 'title' 설정 예제

– 'x/yAxis' 설정 예제

– 'plotOptions' 설정예제

– 'tooltip' 설정 예제

– 'legend' 설정 예제

– 기타 예제

2

HighCharts 란?

• 순서 자바 스크립트로 작성된 차트 라이브러리

• Norway의 ‘Vik’이라는 작은 마을에 위치한‘Highsoft’ 회사에서 2009년 출시

• 모바일 브라우저를 지원, 멀티터치 줌 지원

• Modern Browser는 SVG로, 이전 Browser는 VML로 그래프 작성

• Highstock, Highmaps의 기초가 됨

2017-05-19 3

Owner: Torstein Hønsi

HighCharts 특징

• Compatible

– Modern Browser 지원

• Pure JavaScript

• (Non-Commercial) Free

• 간단한 설치

• 심플한 설정 Syntax

• external data loading 가능

2017-05-19 4

HighCharts 차트 종류

2017-05-19 5

[ Line Chart ] [ Bar Chart ]

[ Pie Chart ] [ Area Chart ]

HighCharts 차트 종류

2017-05-19 6

[ Scatter Chart ] [ Gauge Chart ]

[ Polar Chart ] [ Etc… ]https://www.highcharts.com/demo

HighCharts 구성

2017-05-19 7

title

subtitle

yAxis

xAxis

x/yAxis:title

credits

exporting

legend

tooltip

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축 설정

차트 데이터 작성

결과:

HighCharts 기본예제

'chart' 설정 예제

2017-05-19 9

• 'chart' 설정 예제 (http://jsfiddle.net/seoka35/52r36gvd)

HighCharts 기본예제

2017-05-19 10

chart : {

type : 'bar'

}

chart : {

type : 'column'

}

• 'chart' 설정 예제

HighCharts 기본예제

2017-05-19 11

chart : {

backgroundColor: "#CCCCCC"

}

chart : {

plotBackgroundColor: "#CCCCCC"

}

• 'chart' 설정 예제

HighCharts 기본예제

2017-05-19 12

chart : {

borderColor: "#CCCCCC",

borderWidth: 2

}

chart : {

plotBorderColor: "#CCCCCC",

plotBorderWidth: 2

}

HighCharts 기본예제

'title' 설정 예제

2017-05-19 13

• 'title' 설정 예제

HighCharts 기본예제

2017-05-19 14

title : {

align: "left"

}

title : {

floating: true

}

• 'title' 설정 예제

HighCharts 기본예제

2017-05-19 15

title : {

style: {

color:'#FF00FF',

fontWeight:'bold'

}

}

title : {

x: 100,

y: 50

}

HighCharts 기본예제

'x/yAxis' 설정 예제

2017-05-19 16

• 'x/yAxis' 설정 예제

HighCharts 기본예제

2017-05-19 17

yAxis : {

gridLineColor:'#000000',

gridLineWidth:2

}

yAxis : {

lineColor: '#000000',

lineWidth: 2

}

• 'x/yAxis' 설정 예제

HighCharts 기본예제

2017-05-19 18

yAxis : {

min:2,

max:6

}

yAxis : {

tickInterval:1,

tikcAmount:16

}

• 'x/yAxis' 설정 예제 (http://jsfiddle.net/seoka35/jzg76jpj)

HighCharts 기본예제

2017-05-19 19

xAxis : {

title:{text:'xAxis Title'}

}

xAxis: {

crosshair:true

}

HighCharts 기본예제

'plotOptions' 설정 예제

2017-05-19 20

• 'plotOptions' 설정 예제

– 차트 데이터 영역에 대한 차트별 공통 설정

HighCharts 기본예제

2017-05-19 21

plotOptions: {

series: {

borderWidth: 2,

borderColor: 'red'

}

}

plotOptions: {

series: {

color: 'red'

}

}

• 'plotOptions' 설정 예제

HighCharts 기본예제

2017-05-19 22

plotOptions: {

series: {

dataLabels: {

enabled:true,

format:'{y} 개'

}

}

}

HighCharts 기본예제

'tooltip' 설정 예제

2017-05-19 23

• '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>';

}

}

• '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

}

HighCharts 기본예제

'legend' 설정 예제

2017-05-19 26

• 'legend' 설정 예제

HighCharts 기본예제

2017-05-19 27

legend: {

align: 'right',

verticalAlign: 'middle',

layout: 'vertical'

}

legend: {

backgroundColor: '#FCFFC5',

borderColor: '#C98657',

borderWidth: 1

}

HighCharts 기본예제

기타 예제

2017-05-19 28

• 기타 예제

HighCharts 기본예제

2017-05-19 29

credits: {

enabled: false

}

exporting: {

enabled: false

}

HighCharts 기본예제

• 더 자세한 설정은 HighCharts Options Reference 참고(http://api.highcharts.com/highcharts)

2017-05-19 30

Reference

• HighCharts Official Site (https://www.highcharts.com)

• Wikipedia, article 'HighCharts' (https://en.wikipedia.org/wiki/Highcharts)

2017-05-19 31