하이차트 데이터 연동 예제

이전 시간에 간단한 하이차트 구현 방법에 대해서 알아보았는데요. 이번에는 DB에서 가져온 데이터를 이용하여 하이차트 데이터 연동 예제를 구현해 보도록 하겠습니다.

기본적인 프로젝트의 구조는 Spring, Mybatis, Oracle을 따르며 차트는 레이어 팝업을 이용하여 구성하도록 하겠습니다.

1. 프로젝트 구조

프로젝트의 구조는 위와 같습니다.

모든 css는 popup.css에 공통으로 두었습니다.

(레이어 팝업 css는 이쪽에 복사해 주시기 바랍니다.)

2. 소스코드

2.1 javascript

<link rel="stylesheet" href="/resources/popup.css">
<script src="/resources/js/jquery-3.1.1.min.js"></script>
<script src="/resources/js/jquery.bpopup.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script>

<script type="text/javascript">

		function chart(ename,sal) {		

	 	$('#layer_popup').highcharts({

        chart: {
            type: 'column',
            options3d: {
                enabled: true, alpha: 15, beta: 15, viewDistance: 25, depth: 40
            },
            marginTop: 80, marginRight: 40
        },

        title: {
            text: ename+' 연봉 비교 그래프'
        },

        xAxis: {
            categories: ['연봉', '직원평균']
        },

        yAxis: {
            allowDecimals: true, min: 0, title: {
                text: ''
            }
        },

        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
        },

        plotOptions: {
            column: {
                stacking: 'normal', depth: 40
            }
        },

        series: [{
            name: ename+'연봉',
            data: [Number(sal)],
            stack: 'male'
        }, {
            name: '직원평균',
            data: [0, 1000],
            stack: 'male'
        }]
    }); 
				$('#layer_popup').bPopup();
			
		};
	</script>

2.2 HTML

<body>
	<table>
	<tr><td>이름</td><td>직원번호</td><td>직책</td><td>연봉</td><td>입사일</td></tr>
	
	<c:forEach var = "item" items ="${list }">
	<tr>
	<td width="170px">제 이름은 ${item.ename } 입니다.</td>
	<td><a onclick="chart('${item.ename}','${item.sal }')">${item.empno }</a></td>
	<td>${item.job }</td>
	<td>${item.sal }</td>
	<td>${item.hiredate }</td>
	</tr>
	</c:forEach>
	
	</table>
	
	<div id="layer_popup" class="button_style">
		<span class="layer_close"><span>X</span></span>
			<div class="content">
				 <div id="chart_div"></div> 
			</div>
	</div>
	
</body>

3. 소스 설명

일단 DB에서 가져온 데이터를 foreach를 통해 리스트화 시킵니다.

그리고 직원번호 부분에 onclick 메소드를 두어 chart(이름, 연봉, 직원번호)를 전송합니다.

연봉 클릭시 chart function이 호출 되어 레이어 팝업과 하이차트를 그립니다.

하이차트의 데이터 표현하는 series부분에 mapping 시켜 줍니다.

4. 구현 결과

프로젝트 구동시 위와 같이 직원리스트가 나타나는데요.

차트를 보고 싶은 직원 번호를 클릭합니다.

그럼 위와 같이 직원의 연봉과 평균 연봉이 차트로 나타나게 됩니다.

※ 구현 부분에 어려우신 분들을 위해 프로젝트 예제소스를 첨부하니 참고하시기 바랍니다.

IT 정보사이트