HighCharts(하이차트)를 자바 프로젝트에 적용하는 방법!

안녕하세요. 오늘은 자바 프로젝트에 차트를 적용하는 방법에 대해 알아보겠습니다.

우선 제가 사용할 차트는 ‘하이차트(HighCharts)’라는 녀석입니다.

HighCharts는 2009년에 순수 자바스크립트로 만들어진 라이브러리입니다.

자바에서 데이터베이스를 통해 자바스크립트로 처리하는 방법으로 진행하려합니다.

(2021년 2월 추가 수정하였습니다.)

요약하자면

1. 자바 코드 작성 (컨트롤러 – 서비스 – DAO)
2. 데이터베이스 작성(XML)
3. 자바 스크립트 적용

차트 자체가 난해할 수 있는 부분이지만 생각보다 어렵지 않고 간단히 만들어낼 수 있습니다.

완성 화면 입니다. X축은 이름 Y축은 값으로 이루어져 있습니다.

 

 

---

 

이젠 시작해보겠습니다.

우선 하이차트(HighCharts)홈페이지에 들어갑니다.

 

하이차트(HighCharts) : https://www.highcharts.com/

 

하이차트 메뉴에서 데모를 들어가시면 많은 데모자료들을 볼 수 있습니다.

 

 

 

그 중에서 저는 Dynamic charts 부분에서 Update options after render를 사용해보도록 하겠습니다.

 

 

클릭해서 들어가보면 아래 화면이 있습니다. 여기서 view options를 클릭해줍니다.

그러면 소스코드가 나타나게되는데, 아래 표기된 부분만 긁어오면 사용할 수 있습니다.

 

 

CONTROLLER

 

 

List<tbl_counselVO> result = adOnlineCounselService.getCounselHistoryChartInfo(searchVO);
        
JSONArray cJsonArr = new JSONArray();
JSONObject cJsonObj = new JSONObject();
for(tbl_counselVO vo : result) {
        cJsonObj.put("y", vo.getCnt());
        cJsonObj.put("d", vo.getCs_pm());
        cJsonArr.add(cJsonObj);
}
 
model.addAttribute("chartJSON", cJsonArr);

 

우선 컨트롤러에서 뽑아낼 데이터를 자바로 작성합니다.

여기서 차트의 데이터 값이 JSON배열로 되어있기 때문에 차트에 맞춰 값을 뽑아낼 수 있도록 합니다.

컨트롤러에서는 리스트로 뽑아낸 데이터를 JSONOBJECT와 JSONARRAY를 통하여 값을 넣어준 후 MODEL로 값을 빼냅니다.

  

XML

 

<select id="getCounselHistoryChartInfo" parameterType="tbl_counselVO"  resultType="tbl_counselVO">
    SELECT 
        cs_pm, 
        count(*) as cnt  
    FROM 
        tbl_counsel 
    group by 
        cs_pm;
</select>

 

 

그리고 쿼리에서 group by를 통하여 이름(cs_pm)과 값(count)를 뽑아냅니다.

 

 

 

반응형

 

 

 

Javascript

 

<script src="${pageContext.request.contextPath}/js/highChart/highcharts.js"></script>

JSP 맨 윗부분에 하이차트.JS를 선언해줍니다.

 

 

<script type="text/javascript">
 
var todayInfo = null;

그리고 스크립트 위에 전역 변수로 todayInfo를 만들어줍니다.

그리고 document.ready.function에 본격적으로 차트 관련된 함수를 작성합니다.

 

Getpersoncnt함수

 

function getPersonCnt(type){
    if(todayInfo==null) todayInfo=${chartJSON};
    var todayInfoMap = resultProcLineChart(todayInfo);
    if(todayInfoMap==null) return null;
    if(type=="data"){
        return todayInfoMap.get("data");
    }else{
        return todayInfoMap.get("cateArr");
    }
}

Getpersoncnt에 타입을 넣어서 x축과 y축을 구분할 수 있도록 해줍니다.

컨트롤러에서 model로 빼낸 ‘chartJSON’을 resultProcLineChart함수안에 넣어준다음

todayInfoMap이라는 녀석에게 넣어줘서 맵 형태로 만들어줍니다.

 

resultProcLineChart함수

function resultProcLineChart($obj){
    if($obj==null) return null;        
    var resMap = new JqMap();
    
    var cateArr = new Array();
    var dataArr = new Array();
    
    
    for(var k in $obj){
        var xobj =$obj[k];
        
        cateArr.push(xobj.d);    
        dataArr.push(xobj.y);             
    }
    
    
    resMap.put("cateArr",cateArr);
    resMap.put("data",dataArr);
    
    return resMap;
}

 

컨트롤러에서 model로 빼낸 ‘chartJSON’이 obj로 되어서 for문을 통하여 xobj에 넣어준 후

각 선언한 배열 (cateArr / dateArr)에 오브젝트에서 put으로 빼낸 y와 d를 넣어줍니다.

그리고 resmap에 최종적으로 넣은 후 return으로 반환시켜줍니다.

 

 

 

 

차트

//차트[s]
var chart = Highcharts.chart('container', {
 
  title: {
      text: '기업 공감 상담'
  },
 
  subtitle: {
      text: '기업관리'
  },
 
  xAxis: {
      categories: getPersonCnt("cateArr"),
  },
  
          
  series: [{
      type: 'column',
      colorByPoint: true,
      data: getPersonCnt("data"),
      /* data: getPersonCnt("data"), */
      showInLegend: false
  }]
 
});
//차트[e]

 

차트 부분에서 실질적으로 데이터가 들어가는 부분은

xAxis의 categories부분과 series의 date부분입니다.

여기에 getPersonCnt의 각각의 이름의 오브젝트를 넣어주면 끝입니다!

나머지는 설정부분이니 입맛대로 변경하시면 됩니다.

 

 

HTML

<div id="container" style="width:500px; height:400px;"></div>

그리고 마지막에는 HTML부분에서 원하는 위치에 DIV를 넣고 width와 height를 통해서 차트의 크기를 조절하면 끝입니다!

 

 

전체소스입니다.

 

<script src="${pageContext.request.contextPath}/js/highChart/highcharts.js"></script>
 
<script type="text/javascript">
 
var todayInfo = null;
 
$(document).ready(function() {
            
//차트[s]
var chart = Highcharts.chart('container', {
 
  title: {
      text: '기업 공감 상담'
  },
 
  subtitle: {
      text: '기업관리'
  },
 
  xAxis: {
      categories: getPersonCnt("cateArr"),
  },
  
          
  series: [{
      type: 'column',
      colorByPoint: true,
      data: getPersonCnt("data"),
      /* data: getPersonCnt("data"), */
      showInLegend: false
  }]
 
});
//차트[e]
 
function getPersonCnt(type){
    if(todayInfo==null) todayInfo=${chartJSON};
    var todayInfoMap = resultProcLineChart(todayInfo);
    if(todayInfoMap==null) return null;
    if(type=="data"){
        return todayInfoMap.get("data");
    }else{
        return todayInfoMap.get("cateArr");
    }
}
 
function resultProcLineChart($obj){
    if($obj==null) return null;        
    var resMap = new JqMap();
    
    var cateArr = new Array();
    var dataArr = new Array();
    
    
    for(var k in $obj){
        var xobj =$obj[k];
        
        cateArr.push(xobj.d);    
        dataArr.push(xobj.y);             
    }
    
    
    resMap.put("cateArr",cateArr);
    resMap.put("data",dataArr);
    
    return resMap;
}
 
});
 
</script>
 
 
//HTML
<div id="container" style="width:500px; height:400px;"></div>
 
 
 
 
//CONTROLLER
List<tbl_counselVO> result = adOnlineCounselService.getCounselHistoryChartInfo(searchVO);
        
JSONArray cJsonArr = new JSONArray();
JSONObject cJsonObj = new JSONObject();
for(tbl_counselVO vo : result) {
        cJsonObj.put("y", vo.getCnt());
        cJsonObj.put("d", vo.getCs_pm());
        cJsonArr.add(cJsonObj);
}
 
model.addAttribute("chartJSON", cJsonArr);
 
 
 
//XML
<select id="getCounselHistoryChartInfo" parameterType="tbl_counselVO"  resultType="tbl_counselVO">
    SELECT 
        cs_pm, 
        count(*) as cnt  
    FROM 
        tbl_counsel 
    group by 
        cs_pm;
</select>