highchart 데이터 ajax 처리 에러

Nux·2022년 7월 8일
0
post-custom-banner

오류경위

AJAX를 통해 List<Map<String,Obejct>>타입의 데이터를 불러와 highchart의 data에 대입했으나, 차트가 출력되지 않음

소스

  • AJAX
test = new Array();
$.ajax({
	url:"/memberchart.do",
	success: function(result){
		test = result;
	}
})
  • 하이차트
Highcharts.chart('chart-member', {
	chart: {
		type: 'pie'
	},
	(생략),
	series: [{
		name: '비율',
		colorByPoint: true,
		data: test
	}]
});

해결

AJAX가 로딩 완료 되기 전에 Highcharts가 먼저 로딩이 되어서 발생하는 오류로,
아래와 같이 Highcharts를 함수화 한 후, Ajax에서 호출하는 방식으로 해결

test = new Array();
$.ajax({
	url:"/memberchart.do",
	success: function(result){
		test = result;
		charts(); // 함수 호출
	}
})

function charts(){ // 함수화
	Highcharts.chart('chart-member', {
		chart: {
			type: 'pie'
		},
		(생략),
		series: [{
			name: '비율',
			colorByPoint: true,
			data: test
		}]
	}); 
}

그 외

data를 넣을때는 순서, 대/소문자 구분이 정확히 되어있어야 함.
즉, 아래의 경우는 데이터가 출력되지 않음.

  • 순서 바뀜 [{y:00,name:"어쩌고"}]
  • key값이 대문자 [NAME: "어쩌고", Y:00]
post-custom-banner

0개의 댓글