Chart.js 질문 좀 드릴게요

Question

클릭 시 Ajax 비동기로 데이터 배열로 받아와서 ChartJS를 이용해 그래프 뿌리는 소스 작성했는데요그래프가 있는 상태에서 다시 클릭을 하면 Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused라는 스크립트 오류가 뜹니다.찾아보니까 이유는 기존에 Canvas에 차트가 있어서 오류가 뜬다고 하네요..destroy(); 를 이용하라고 하는데, 그렇게 하니까 기존에 차트가 그려졌다가 바로 지워지면서아예 화면에 표출되지가 않습니다...소스 올리겠습니다. 해결방법 좀 알려주세요$.ajax({ url : &#34;/cmm/rehab/getSearchDataStatis.do&#34;, type : &#34;POST&#34;, data: data, dataType : &#34;json&#34;, success : function(result) { $.each(result, function(i, dataList){ xList.push(dataList.xaxis); yList.push(dataList.yaxis); }); const ctx &#61; document.getElementById('barChartJS').getContext('2d'); const myChart &#61; new Chart(ctx,{ type: 'bar', data: { labels: xList, datasets: [{ label: '', data: yList, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } }, plugins: { legend:{ display: false } } } }); }, error : function(request, status, error){ alert(&#34;code:&#34;&#43;request.status&#43;&#34;
&#34;&#43;&#34;error:&#34;&#43;error); } });

HJOW · Answer

이 소스가 전체 소스가 아닌가보죠.그것도 지금 이 부분이 한번만 호출되는 게 아니라버튼 누를 때마다 호출이 된다거나...저const myChart &#61; new Chart()로 차트 객체 만들고매개변수에다 Canvas의 ctx객체 넣어 쓰죠?그건 최초 1회만 해야 하고이미 만들어져 있으면 또 new 하지 말고, 기존 객체에 데이터만 바꿔서 써야해요.저 myChart 변수 재활용해야 된다는 얘기에요.https://www.chartjs.org/docs/latest/developers/updates.html

Chart.js 질문 좀 드릴게요

1개의 답변

Q&A 목록