Highchart를 설치하지 않으신 분들은 하단의 링크를 참고하세요!
https://i-will-develop.tistory.com/2
[Highchart]Highchart를 사용하기 위한 준비
먼저 하이차트 프로그램을 다운 받아줍니다. 하이차트 사이트에 와서 'Try for Free' 버튼을 클릭 해 줍니다. 밑으로 내리면 이런 카드가 보일텐데 Highcharts 9.3.2 버전을 다운받아준다. 따로 win, mac, li
i-will-develop.tistory.com
오늘 이시간에는 Highchart의 기본적인 용어나 개발팁 등을 다뤄볼 예정입니다.
위 이미지의 차트는 하이차트의 컬럼타입 차트입니다.
독립된 컬럼별 수치 표현에 용이한 차트입니다.
코드를 보시겠습니다.
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<script src="../../code/modules/accessibility.js"></script>여기에 보이는 .js들은 거의 필수이기 때문에
Header.jsp 혹은 <head>에 본인 프로젝트 경로에 맞게 작성 하셔야 합니다.
<style>은 넣으셔도 되고 안넣으셔도 됩니다.
테스트라면 넣는걸 추천드리고
개발하신다면 안넣는걸 추천드립니다. (각 프로젝트별 스타일이 다르기 때문임)
아래는 Highchart 옵션 및 기동 소스입니다.
<body>
<div id="container"></div>
<script type="text/javascript">
Highcharts.chart('container', { // 'container'부분이 하이 차트를 띄울 div의 id입니다.
chart: {
type: 'column' // 차트의 Type을 지정하는 부분입니다.
},
title: {
text: 'Monthly Average Rainfall' // 차트 맨 위에 Title을 입력하는 부분입니다.
},
subtitle: {
text: 'Source: WorldClimate.com' // Title밑에 subTitle을 입력하는 부분입니다.
},
xAxis: { // x축(가로) 부분입니다.
categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
crosshair: true
},
yAxis: { // y축(세로) 부분입니다.
min: 0, // 최소 값이 0이라는 뜻입니다.
title: {
text: 'Rainfall (mm)' // 보통 단위를 여기에 써넣습니다.
}
},
tooltip: { //차트에 Hover했을때 보여지는 toolTip입니다.
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: { // 차트 공통옵션들을 여기에 넣습니다.
column: {
pointPadding: 0.2, borderWidth: 0
}
},
series: [{ // 차트의 데이터와 데이터의 이름등이 들어가는 곳입니다.
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
</script>
</body>하이차트의 차트 옵션들은 Map형식으로 구성되어있습니다.
개발 하실때 , 의 위치를 잘 확인 하시고
{} 와 [] 의 구분을 잘 염두하여 개발 하시길 권장합니다.
먼저 스크립트 처음부분에
Highcharts.chart('container',{이라고 되어있는 부분에 'container'가
차트를 띄울 div에 id값이 들어가는 부분인데요.
당연히 변수가 들어가도 됩니다.
Highcharts.chart('container',{ // 이렇게도 쓰지만
-------------------------------------------------
var chartId = 'container'; Highcharts.chart(chartId,{ // 이렇게도 씁니다.또한 Highchart를 변수에 넣을 수도 있습니다.
var chart;
var chartId = 'container';
chart = new Highcharts.chart( chartId ,{Highchart를 변수에 넣어서 표현하는 방법은 추후 포스팅에 작성 하겠습니다.
다음은 Title 과 subTitle 부분입니다.
'어 저는 Title이나 subTitle가 필요없는데요?'
하시는 분들 있으실 겁니다.
그럼 ,까지 잘 나눠서 주석해보세요!!
... 해치웠나??
.....
라고 해서 주석을 치게되면?
//title: {
// text: 'Monthly Average Rainfall'
// },
//subtitle: {
// text: 'Source: WorldClimate.com'
// },
아직 차트의 타이틀이 사라지지 않은 모습!
때문에 주석을 치지 않고
title: { text: '' }, subtitle: { text: null },이렇게 처리를 해줍니다. 그러면?
차트의 Title 부분이 사라지면서
Title이 차지했던 공간도 같이 사라지게 됩니다.
'어? 근데 위에 공간 없는건 불편한데요?' 라고 하시는 분들이 있습니다.
그럴땐
chart: { type: 'column', marginTop:30, },요 chart라는 옵션에 marginTop:30을 추가 해주시면 됩니다.
30을 주는 이유는 여러번 해보다보니깐
30에서 50정도가 무난하더라구요?
주의하실점은 , 를 꼭 잊지말고 써주세요!!
마지막줄에 , 를 찍어도 오류가 나지 않으니
, 를 마지막에 꼭 찍어두세요!
혹시나 추가할 옵션이나 주석처리하는 과정에서
, 누락되서 오류가 날 상황을 줄여줍니다.
이렇게 Top에 margin이 30정도 주어집니다.
어.. 한번 marginTop:0, 도 해보세요.
위에가 댕강 짤려요 ㅋㅋ..
제 느낌상 marginTop의 Default는 20정도 되는거 같아요.
일단 포스팅이 더 길어지면 노잼이기 때문에 여기 까지 하구 남은 옵션은 다음 포스팅때 작성해드리겠습니다!
'High Chart' 카테고리의 다른 글
| [Highchart]Column차트 Series의 grouping옵션을 알아보자 (0) | 2022.01.12 |
|---|---|
| [Highchart]Legend(범례), jsp에서 button으로 만들기 (0) | 2022.01.11 |
| [Highchart]Format, Formatter를 사용해보자 (0) | 2022.01.10 |
| [Highchart]Highchart를 사용해보자2(꿀팁주의22) (0) | 2022.01.07 |
| [Highchart]Highchart를 사용하기 위한 준비 (0) | 2022.01.05 |
