괴발개발/Spring Framework

에러: chart with id '0' must be destroyed, chart is reused

moonday 2021. 10. 6. 16:55

에러가 2개가 있었는데, 

1은 char의 데이터를 초기화안해줬다는 내용이고

2는 차트가 재사용되고있으니 새로 만들으란 이야기였음

=> id도 겹치지않고 canvas도 따로따로 각각 만들었으며 data는 =null이라는 선언도 있는데 개발자도구창에서만 빨간색 에러가 났음(기능은 문제없음)

 

이유:

메인화면에서 로그인 유/무에 따라서 차트 12개중 6개씩만 따로따로 보이는 상태였는데

body태그에서 c:if처리를 화면에서 한 것과 달리, 스트립트에서 사용하는 ajax는 그대로 12개 노출된 상태였기 때문.

=> user의 값을가져와서 var user = '${user}'; if(user==''){} 또는 if(user!=''){} 를 모두 에이젝스 앞에 각각 써주니 개발자 도구에 나타나는 에러 모두 해결.

 

		var perConsulting=null;
		var user = '${user}';
		//월 별 상담 건수
		$(document).ready(function(){
			if(user != ''){
				$.ajax({
					type: 'post',
					async : false,
					url : contextPath + '/class/data/perConsulting',
					success : function(result){
						var data = [];
						var labels = [];
						if(result.length != 0){
							for(i=0; i<result.length; i++){
								data.push(result[i].studentCount);
								labels.push(result[i].yearMonth);
							}
						}else{
							data.push(0);
							labels.push('기록없음');
						}
						var type = 'line';
						var option1 = {
			        scales: {
			            yAxes: {
		                beginAtZero: true,
			              ticks: {
			                stepSize: 1
			              }
			            }
			          }
			        }
							datasets = [{
					            label: '월 별 상담 건 수',
					            data: data,
					            fill: true,
					            borderColor: 'rgb(220, 53, 69)',
					            tension: 0.1
			        }]
							id = 'btn_perConsulting';
							perConsulting = createChart(perConsulting, id, labels, datasets, type, option1);
						}
					});
				}
			})