chart.js 그래프 다시 그리기(그래프 초기화)

문제 발생

chart.js를 이용하여 그래프를 제작하였다. 처음에는 그래프가 보이지 않고 해당 부분을 클릭을했을 때 chart가 보이게 제작을 하였는데, 처음에는 오류가 안뜨는데 chart가 보이는 부분을 다시 닫았다가 다시 열면 오류가 발생하였다. 

(오류 메시지를 캡처했어야 했는데 ... 캡처를 못했다)

왜 이렇게 오류가 뜨는지 해결하려고 살펴보다보니, 처음에는 그래프가 그려지지만 다시 그리려고 하면 기존에 그래프가 있기 때문에 발생되는 오류 였다. 즉, 기존 그래프를 그렸다면 초기화를 하면 해당 문제를 해결할 수 있다.

 

문제 해결

const chartStatus = Chart.getChart(ctx);
		if (chartStatus !== undefined) {
			chartStatus.destroy();
		}

chart를 사용하고 있다면 (undefinded를 이용) .destroy를 이용하여 그래프를 초기화하였다. 이렇게 초기화하니 해당 문제가 다시 발생하지 않았고, 그래프를 초기화하고 다음 코드에서 다시 chart를 그려주었다.