본문 바로가기
라이브러리/Highchart

하이차트 전자정부표준프레임워크 ajax로구현

by so5663 2022. 2. 11.

JSP부분

$(document).ready(function() {
    $.ajax({
    url: URL,
    dataType: "json",
    data: {a: ${param.a}} ,
    type: "post",
    success: function(data) {
        ChartLine(data);
    },
    error: function(e) {
        alert("차트 데이터를 가져오는데 실패하였습니다.");
    	}
    });
});

 

function ChartLine(data){	
    var name= "ChartLine";
	
	
	var getyear =[]; //년도 담는 배열
	var count = []; //데이터 담는 배열
	for(var a =0; a< data.data.length; a++ ){
		getyear.push(data.data[a].변수);
		count.push(data.data[a].변수);
	}
	
	Highcharts.chart(name, {
		colors: ['#f67270'] ,
	    chart: {
	        type: 'line', // 종류별 차트
	    },
	    credits: {//하이차트.com 제거
            enabled: false
        },    
        exporting: {//상단 버튼 제거
            enabled: false
        },
	    title: {
	        text: ''
	    },
	    subtitle: {
	        text: ''
	    }, 
	    xAxis: [{
	        categories: getyear,
	    }],
	    yAxis: {     	
	        title: {
	        	x:-30,
	        	rotation: 0,
	            text: ''            	
	        }
	    },
	    legend: {
	        enabled: true
	    },
	    tooltip: {
	        pointFormat: '<b>{point.y}</b>'
	    },
	    series: [{
	        name: 'test',
	        data: count,
	        dataLabels: {
	            enabled: true,
	            rotation: 0,
	            color: 'read',
	            align: 'right',
	            format: '{point.y}', // one decimal
	            y: 10, // 10 pixels down from the top
	            style: {
	            	fontSize: '13'
	                ,fontFamily: 'notoSans'
                	,fontWeight: 'normal'
	            }
	        }
	    }]
	});
}
<div class="box_graph">
    <span class="tit_graph">(단위: 건/개)</span>
<div class="graph_in" id="blkCnChartLine1"><!-- 그래프가 들어갑니다. --></div>

 

컨트롤 부분

 

@RequestMapping(value = "/front/blk/blkCnChart.do")
@ResponseBody // 자바 객체를 HTTP 응답 본문의 객체로 변환
public Map<String,Object> blkCnChart((@RequestParam("a") String a)) throws Exception {
									
        Map<String,Object> listMap = new  HashMap<String,Object>(); // 
        List<Map<String, Object>> highchart = blkService.brokerCurrent(a);

        listMap.put("data", highchart);    
    	return listMap;
    }