[Highchart]Highchart를 사용해보자2(꿀팁주의22)

지난포스팅에 이어 Highchart의 옵션에 대해서 설명 해드리겠습니다.

혹시나 지난 포스팅의 내용이 궁금하거나 못보신분들을 위해 링크 남기겠습니다.

https://i-will-develop.tistory.com/3

[Highchart]Highchart를 사용해보자.(꿀팁주의)

 

다음 옵션으론 xAxis과 yAxis가 있습니다.

각각 x축과 y축을 뜻하는데요.

아래 코드를 보시면

xAxis: {
        categories: [ //배열
            'Jan',
            'Feb',
            'Mar',
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0, // y축 최소값
        title: {
            text: 'Rainfall (mm)' // y축의 단위 혹은 제목
        }
    },

'categories'옵션이 배열의 형태로 되어있는것을 확인 할 수 있습니다.

우리는 이 점을 미루어 보아

'Highchart에 데이터를 넣을땐 배열로 넣을 수 있고

순서는 배열의 자리 순서대로 들어간다.' 라는걸 알 수 있습니다.

 

또한 데이터(배열 등)도 변수의 형식으로 들어갈 수 있습니다.

var myColumn = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
xAxis: {
        categories: myColumn,
},

이렇게 말이죠.

 

다음은 Tooltip입니다.

툴팁이 정말 재밌는 요소들이 많은데요.

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
},

<- 이부분이 headerFormat이 들어갈 공간이고

나머지 부분이 pointFormat, footerFormat이 들어갈 공간입니다.

 

 

 

useHTML옵션을 true로 선언해서 HTML을 이용한 툴팁을 만들었고

shared 옵션을 true로 선언해서 각 x 축 컬럼들의 값을 하나의 툴팁으로 보여줍니다.

만약 shared 옵션을 false로 선언하면 x축 컬럼의 값이 하나씩만 나오게 됩니다.

 

툴팁에 대한 더욱 자세한 설명은 추후에 포스팅 하겠습니다.

 

( PlotOptions는 다양한 옵션이 있으므로 추후에 한번에 모아서 포스팅 하겠습니다.)

 

다음으로 제일 중요한 Series 입니다.

차트를 띄우기 위해선 반드시 필요한 옵션인데요.

각 컬럼의 이름을 선언 할 수 있고 Data를 집어 넣을 수 도 있습니다.

 

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]

    }]

Series는 []안에 {}가 있고 , 로 구분을 합니다.

만약 내가 차트에 표현해야할 컬럼이 100개 이상이라면

언제 {} 열고 , 치고 할까요..?

 

이때 배열을 가진 변수를 선언해서

포문으로 배열안에 각 Column별 Data를 넣어주면 됩니다.

 

간단한 예를 들어보겠습니다.

<script>
var chartData = [];
var jsonData = 데이터베이스에서 받아오는 json형태 혹은 map형태의 x축컬럼의 이름들;

for(var i=0 ; i<jsonData.length; i++){
	chartData.push({
    	name:jsonStr[i].colNm, // String형태로 파싱 필요
        data:jsonStr[i].colData // 값 혹은 배열형태로 파싱 필요
        });
}

================================================================================
.
.
	series: chartData,
.
.
</script>

짠..!

어.. 간단한가? 음... 아무튼 궁금한 사항 있으시면 댓글 달아주세요 아는 선에서 답변 드리겠습니다!!

 

제가 했던 프로젝트에서 json형태로 받아오는 실시간 데이터들을 정리해서 각 옵션에 들어갈 데이터 형식으로

파싱해서 집어 넣었던게 생각이 나서 간단히 짚어드렸습니다.

 

자 이렇게 해서 Highchart example폴더에 column-basic 차트를 통해

Highchart의 옵션에 대해서 간략히(?) 설명 했는데요.

제가 Highchart에 대해서 포스팅 하게된 이유는 stackoverflow라는 사이트와 highchart사에서 제공하는 api말고는

참고 할만한 자료가 많지 않더라구요?

그래서 Highchart적용법이나 다운로드 방법은 다른 블로그 분들이 더 자세하고 친절하게 포스팅 되있으니까

저는 Highchart 옵션이나 사용법에 대해서 다뤄보려고 합니다.

앞으로도 잘 부탁 드립니다.