Vue) Chart.js update 안됨. chart.js update not working, canvas is already in use

 

 상황 

검색해서 나온 데이터들을 chart로 보여주는데,

같은 페이지 내 검색 조건을 다르게 해서 데이터가 달라질 경우 chart를 다시 띄우는데 새로 그려지지가 않는다.

 

처음에는 canvas is already in use 오류를 만났고

다음에는 차트가 변경되지 않는 오류를 만났다.

 

 

 

 오류 설명 

canvas is already in use 는 차트가 이미 있는데 또 New Chart()로 생성을 하려고 해서 생긴 오류다. 

New Chart()는 처음만들때 한번만 가능하고, 이미 같은 차트가 있는데 또 생성을 할 수는 없다.

재 생성하려면 기존 차트를 없애야 한다. 

 

차트가 변경되지 않는 이유는 분병 리스트의 데이터 값는 달라졌는데 차트가 그대로 유지가된다.

 

 

 

 

 해결방법 

1) 차트를 아예 없애고 다시 생성하기 - destroy()

     이 방법은 New Chart() 함수를 다시 실행하고 싶을때 사용하는 방법이다. 

2) 차트를 업데이트 하기 - update()

     기존 차트를 새로운 데이터로 다시 구성하는건데, 나는 데이터만 변경되는거니까 update를 하려고 한다. 

 

 

 

 

 

 update가 안됐던 이유 

공식문서를 보니 바로 이유를 알았다. 

https://www.chartjs.org/docs/latest/developers/updates.html

 

 

 

데이터를 변경할때 제자리에서 변경됐던것이다. 

 

자바스크립트의 배열(리스트)을 초기화하는 방법에는 여러개가있는데 나는 단순히 데이터만 지웠다. 

// 기존코드
dataList = []

for(let i = 0; i < 10; i++) {
	dataList[i] = Object.values(val)[i];
}

 

 

배열을 초기화 할때 [ ] 로 하면 단순히 내부 데이터만 지우는것이므로

배열을 새롭게 하는 splice를 사용해야한다. 

splice는 원본배열을 바꿔서 잘라내어 새로운 배열로 반환하는 함수다. 

 

// 변경코드
dataList.splice(0, dataList.length);

for(let i = 0; i < 10; i++) {
	dataList[i] = Object.values(val)[i];
}

 

 

 

도움이 되었다면 좋아요!!