에러: Failed to create chart: can't acquire context from the given item

Chart.js에서 시험점수를 입력하면 시험의 이름에 따라 리스트가 생기고 그래프에 점수가 반영되는 작업을 하는 도중에

다른 것들은 문제가 안됐지만, 최초 점수 등록시 차트가 나타나지 않는 문제가 있었음

 

해결:

c:if로 차트에 넘어올 데이터배열의 size()가 ==0이면 숨김처리를 화면에서 해놨는데, canvas가 없다고 인식하기 때문

=> 따라서, canvas를 밑에 따로 추가해주면 추가된 곳에 점수들이 다 추가되어 해결 가능

 

body태그안에 이런식으로 차트구조가 생겼다면

<div id="selectBox_container">
	<select class="testName_selectBox form-select" multiple aria-label="multiple select example">
      <c:forEach items="${tabList}" var ="testName">
          <option class="selectGraph" value="${testName}">${testName}</option>
      </c:forEach>
      <c:if test="${tabList.size() ==0}">
          <option>시험점수 추가/수정을 통해 시험기록들을 그래프로 확인할 수 있습니다.</option>
      </c:if>
    </select>
	<c:if test="${tabList.size() !=0}">
		<canvas id="chart" style="border: 1px solid gray;"></canvas>
    </c:if>
</div>

 

스크립트 태그안에 아래와 같은 구간을 추가해줘야 함

if(document.getElementById('chart') == null){
     $('#selectBox_container').append('<canvas id="chart" style="border: 1px solid gray;"></canvas>');
}

해당 기능을 소화하는 구간에서 추가를 해줘야하는데 setchart 메소드에 담겨있어서 메소드에 추가해줬음

			var contextPath = '<%=request.getContextPath()%>';
			var student_id = $('input[name=student_id]').val();
			$(function(){
				$(document).on('click','.btn_addSchool',function(){
					var	eventThis = $(this);
					var school_test_name = $('input[name=school_test_name]').val();
					var school_test_score =  $('input[name=school_test_score]').val();
					var school_test_date = $('input[name=school_test_date]').val();
					var student_school_id = $('input[name=student_id]').val();
					var data = {
							school_test_name:school_test_name,
							school_test_score:school_test_score,
							school_test_date:school_test_date,
							student_school_id:student_school_id
						}
					if($.trim(school_test_name).length <=0
							|| $.trim(school_test_score).length <=0 
							|| $.trim(school_test_date).length <=0 ){
						$('.modalContent').text('추가하려는 시험의 이름, 점수/등급, 해당 일자를 입력해주세요.');
						$('#staticBackdrop').modal('show');
						return;
					}	
					$.ajax({
						type: 'post',
						async : false,
						url : contextPath + '/student/addSchool',
						data : JSON.stringify(data),
						contentType : "application/json; charset=UTF-8",
						success : function(result){
							var result = result;
							if(result == "SUCCESS"){
								eventThis.siblings().children().find('input[name=school_test_name]').val('');
								eventThis.siblings().children().find('input[name=school_test_score]').val('');
								eventThis.siblings().children().find('input[name=school_test_date]').val('');
								var data={student_school_id:student_school_id};
								addSchoolScoreList(data);
								$('.modalContent').text('시험 기록이 추가되었습니다.');
								$('#staticBackdrop').modal('show');
								//새롭게 추가된 시험이름이 DB에 없는거라면 목록에 띄워줘야 함
								refreshTestName(student_school_id);
								//그래프를 새로고침할 순 있지만 위에있는 목록표까지 새로고침되진 않음
							 	setChart(student_school_id, school_test_name);
							}else{
								$('.modalContent').text('시험 기록 추가에 실패했습니다.');
								$('#staticBackdrop').modal('show');
							}
						}
					});
				})
			})

			function setChart(student_id, testName){
				var data2 = { student_id: student_id, testName : testName};
				$.ajax({
					type: 'post',
					async : false,
					url : contextPath + '/student/graph/score',
					data : data2,
					success : function(result){ 
						var scoreName;
						for(key in result){
							var dataes = [];
							for(value of result[key]){
								scoreName = value.school_test_name;
								dataes.push(value.school_test_score);
								labels.push(value.testDate)
							}
							var obj = {
						    label: scoreName,
						    backgroundColor: 'rgb(255, 99, 132)',
						    borderColor: 'rgb(255, 99, 132)',
						    data: dataes,
						  }
							datasets.push(obj);
						}
						const data = {
								  labels: labels,
								  datasets: datasets
									};
						const config = {
									  type: 'line',
									  data: data,
									  options: {}
									};
						if(document.getElementById('chart') == null)
							$('#selectBox_container').append('<canvas id="chart" style="border: 1px solid gray;"></canvas>');
						if(chart != null)
							chart.destroy();
					  chart = new Chart(
							    document.getElementById('chart'),
							    config
							  );
					  dataes = [];
						datasets = [];
						labels = [];
					}
				});
			}
			var chart = null;