amCharts] am차트 사용 방법!! (feat.데이터연동)

안녕하세요. 오늘은 am차트에 대해 이야기해보겠습니다.

am차트를 사용하여 데이터까지 연동하는 형태로 정리하려 합니다.

완성형태입니다. 꽤 깔끔한 디자인입니다.

 

 

 

 

우선 am차트 사이트로 접속합니다. 

 

amCharts = www.amcharts.com/

JavaScript Charts & Maps - amCharts

 

차트 홈페이지답게 차트스러운 화면이 나옵니다. 여기서 데모를 클릭해줍니다.

 

 

엄청나게 많은 차트들이 나옵니다....여기서 제가 만든 파이형태의 차트를 선택해보죠

 

아래 화면이 나올겁니다.. 여기서 자바스크립트 탭이 활성화된 상태에서 ... 표시를 눌러줍니다.

 

 

그럼 큰 화면으로 소스가 나타나게 됩니다~~~~ 여기를 붙여넣은 다음 사용하면 됩니다.

 

 

 

controller

 

우선 List로 배열을 만든 다음 Json배열형태로 만들어줍니다.

List<ContractVO> result = contractStatsManageService.getWorkChartInfo(searchVO);

JSONArray cJsonArr = new JSONArray();
JSONObject cJsonObj = new JSONObject();
for(ContractVO vo : result) {
  cJsonObj.put("y", vo.getChart_total());
  cJsonObj.put("d", vo.getCo_labor());
  cJsonArr.add(cJsonObj);
}
 
model.addAttribute("chartJSON", cJsonArr);

 

service

 

List<ContractVO> getWorkChartInfo(ContractVO searchVO);

 

serviceImpl

 

@Override
public List<ContractVO> getWorkChartInfo(ContractVO searchVO){
	return dao.getWorkChartInfo(searchVO);
}

 

DAO

 

public List<ContractVO> getWorkChartInfo(ContractVO searchVO) {
	return selectList("getWorkChartInfo", searchVO);
}

 

XML

 

select 
	abc
	,count(*) as abc_total
from 
	tbl_name
group by 
		abc 

 

반응형

 

 

 

Script & Html

 

스크립트 전체소스입니다...

하나하나 뜯어보기로하죠!!

 

<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>

<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>


<script type="text/javascript">

var todayInfo = null;


<!-- Chart code -->
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.PieChart3D);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in



 var qq = getPersonCnt("cateArr");
 var ee = getPersonCnt("data");
 
 var dataList = [];
 
	 for (var i = 0, j= 0; i < qq.length, j < ee.length; i++,j++) {
	     var data = {};
	     data.country = qq[i];
	     data.litres = ee[j];
	     dataList.push(data);
	 }
 
  
 var reqData = {};
 reqData.dataList = dataList;
  
 var sendData = {};
 sendData.reqData = reqData;
  	 
 
chart.data = reqData.dataList


chart.innerRadius = am4core.percent(40);
chart.depth = 120;

chart.legend = new am4charts.Legend();

var series = chart.series.push(new am4charts.PieSeries3D());
series.dataFields.value = "litres";
series.dataFields.depthValue = "litres";
series.dataFields.category = "country";
series.slices.template.cornerRadius = 5;
series.colors.step = 3;

}); // end am4core.ready()


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>


<div id="chartdiv"></div>

 

 

var todayInfo = null; 은 컨트롤러에서 JSON배열로 담은 녀석을 사용하기 위한 전역변수입니다.

 

var todayInfo = null;

resultProcLineChart함수는

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

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

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

 

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

Getpersoncnt함수는

 

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

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

todayInfoMap에 넣어 Map형태로 만들어줍니다.

 

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");
    }
}

그리고 가장 중요한 데이터를 넣는 부분입니다!!

홈페이지 데모소스에서 나타나있는것과 같이 JSON형태의 데이터형식입니다.

이 부분을 맞춰줘야 차트가 나타날 수 있습니다.

 

 

제가 많이 부족해서 이 부분에서 시간을 엄청 날렸네요...

우선 만들어낸 배열을 각각 변수에 담습니다....(qq,ee)

dataList란 대괄호를 만듭니다.

그리고 for문을 돌리고

data란 중괄호 안에 country와 litres의 항목을 선언하고 그 안에 각각의 배열값을 넣어줍니다.

그리고 dataList 즉 대괄호 안에 push로 넣어줍니다.

그리고 reqData의 중괄호 안에 dataList를 넣어주면 JSON형태의 값이 출력되게 됩니다.

 

var qq = getPersonCnt("cateArr");
var ee = getPersonCnt("data");

var dataList = [];

 for (var i = 0, j= 0; i < qq.length, j < ee.length; i++,j++) {
     var data = {};
     data.country = qq[i];
     data.litres = ee[j];
     dataList.push(data);
 }


var reqData = {};
reqData.dataList = dataList;

chart.data = reqData.dataList