Vue에서 Chart.js를 사용하여 차트를 업데이트할 때 "잡히지 않은(약속 중) RangeError: 최대 호출 스택 크기가 초과되었습니다."

Question

Mounted()에서 차트 개체를 생성하고 data()에서 선언된 "myChart" 변수에 할당했습니다. 통과하는 메서드가 없다고 들었기 때문에 코드의 다른 범위에서 이 차트 개체를 사용할 수 있기를 원했기 때문입니다. 메소드에 마운트됨에 선언된 변수입니다.

this.myChart.update()를 호출하면 "Uncaught (in promise) RangeError: Maximum call stack size listed"라는 오류가 발생합니다.

이 오류가 발생하는 이유와 해결 방법을 아는 사람이 있나요? 아니면 조사식이나 메서드에서 탑재된 변수에 액세스하는 다른 방법이 있는지 아는 사람이 있나요?

으아악

Answer 1

chart.js는 Vue와 100% 완벽하게 호환되지 않습니다. Chart.js는 DOM(일반 js 애플리케이션에 적합)을 직접 조작하기 때문에 Vue의 DOM 추적 및 관리를 방해할 수 있으며 DOM 조작을 둘러싼 Vue와 Chart.js 간의 줄다리기가 가장 중요합니다. . 이로 인해 최대 호출 스택 크기 초과에 대한 오류가 표시될 수 있습니다. 제가 생각할 수 있는 해결책은 두 가지입니다:

1. Vue가 변경 사항을 추적하지 않도록 차트를 응답하지 않게 만드세요. 이는 데이터 함수의 return 문 외부에 myChart 변수를 생성하여 수행됩니다.

으아아아

위 내용과 관련이 없지만 수정이 필요한지 버그가 필요한지 여부: 차트 update() 기능

을 호출하기 전에 데이터를 설정해야 합니다. 으아아아

이제 차트가 작동하고 업데이트되지만 반응하지는 않습니다. 이것이 당신에게 중요하다면 시도해 보는 것은 어떨까요

2. vue-chartjs, Chart.js의 Vue 래퍼 구현. Chart.js의 모든 기능이 있는지는 잘 모르겠지만 Vue와 호환되는 반응형 차트를 제공할 것입니다.