JavaScript HighChart 하이차트 사용 예시

var arrData4 = new Array();
  
<%-- 상세보기 구분 --%>
var divn = "";
var textDivn = "";
 
/* 정확한 소수점 반올림 */ 
function fncMathRound(num, scale) {     
	if(!scale){scale = "0";}
    return +(Math.round(num+"e+"+scale)+"e-"+scale);
}             
                         
$(function(){           
	if("${proc}" == "eat"){
		divn = "원"; 
		textDivn = "사용 금액";
	}else if("${proc}" == "overTime"){
		divn = "시간";        
		textDivn = "초과 근무";
	}   
	  
	<c:forEach var="info" items="${resultInfo}" varStatus="status">      
		var names = "${info.split('_')[0]}";            
		var info = "${info.split('_')[1]}";    
		arrData4.push({"name" : names, "y" : Number(info), "sliced": true, "selected" : true });
	</c:forEach>            
	      
	if(arrData4.length > 0){
		clickDivn = true;
	}
});  
  
Highcharts.chart('chart04', {  
	  chart: {
	    plotBackgroundColor: null,
	    plotBorderWidth: null,
	    plotShadow: false,       
	    type: 'pie'  
	  }, 
	  title: {           
	    text: ''     
	  },  
	  navigation: {
	      buttonOptions: {
        	  y: -1000 //차트 다운버튼 화면에서 숨김  
	      }   
	  },   
	  credits: {  
	      enabled: false //하단 하이차트 주소 숨김
	  },
	  tooltip: {             
	    pointFormat: '{series.name}: <b>{point.y}' + divn +  '</b>'
	  }, 
	  accessibility: {      
	    point: { 
	      valueSuffix: '%'
	    } 
	  },           
	  plotOptions: {  
	    pie: {          
	      allowPointSelect: true,  
	      cursor: 'pointer',              
	      dataLabels: {    
	        enabled: true,                          
	        format: '<b>{point.name}</b>: {point.y:,3f}' + divn
	      }
	    }
	  },                                    
	  series: [{                  
	    name: textDivn,      
	    colorByPoint: true,
	    data:  arrData4 
	  }]
	  
	});

1. 차트별 범례, 데이터 타입, 데이터 구조가 다르다는 것을 인지

2. 기본적으로 제공하는 예시를 보고 데이터가 입력되는 구조를 파악하는 것이 매우 중요!!

3. 최초 Controller 로부터 넘겨받은 데이터 arrData4 배열에 저장

4. key : value 타입으로 각각의 데이터를 저장 

5. pie 차트의 경우 y 타입의 데이터는 반드시 Number() 함수를 통해 형변환 해야 출력되도록 설계되어 있음

6. 다시 한 번 강조하지만 이미 구조화 된 부분을 캐치하고 데이터 타입에 맞게 값을 셋팅해주는 작업이 중요!!

화면 설명 : 배경의 line 그래프의 날짜 별 포인트를 클릭 했을 시 pie chart 그래프를 modal 창으로 띄우는 작업