ajax 를 활용한 chart.js 렌더링 질문드립니다.

Question

현재 코드는 위와 같습니다. 하지만 오류가 없는데도 페이지에서 차트 렌더링이 불가능합니다.$,ajax 이 부분부터 복사해서 크롬 개발자 도구 콘솔에서 실행 시켜보면 렌더링이 됩니다. 그러나 그마저도 콘솔에서 한번 실행 시켰을 때는 반응이 없고 두 번 붙여넣어서 실행하면 렌더링이 됩니다.이것의 정확한 버그 원인이 무엇인지 궁금합니다.. 해결 방법도 아시면 공유 부탁드립니다. 감사합니다. 아래는 크롬 콘솔에서 실행한 결과입니다. 이렇게 첫 번째 실행을 시키면 렌더링이 똑같이 안되고두 번째 실행을 시키게 되면 차트 렌더링이 됩니다..

하루의_spring · Accepted Answer

$.ajax({ url: &#34;/get_data&#34;, type: &#34;GET&#34;, success: function(response){ data &#61; JSON.parse(response.result); _data &#61; data['data']; _labels &#61; data['label']; }, }); 이렇게 하셨으면 ajax 특정상 비동기로 요청이 올것이고 이의 결과와 상관 없이 아래의 코드가 그냥 임의로 실행이 될것입니다 new Chart(document.getElementById(&#34;example-chart&#34;), { type: &#34;doughnut&#34;, data: { labels: _labels, datasets: [{ label: &#34;합계&#34;, data: _data, backgroundColor: dynamicColors, borderRadius: 5, }] }, options: { responsive: true, maintainAspectRatio: false, tooltips: { backgroundColor: &#34;rgb(255,255,255)&#34;, bodyFontColor: &#34;#858796&#34;, borderColor: &#34;#dddfeb&#34;, borderWidth: 1, displayColors: true, caretPadding: 10 }, legend: { display: false, }, cutoutPercentage: 80 } }); 그렇기에 데이터가 없으니 차트는 데이터가 없으니 아무것도 그리지 못하는 것입니다이때는 데이터를 받은 직후 success 에서 렌더링 하는 작업을 진행하셔야 합니다

specemarker · Answer

도움 주셔서 감사합니다. New chart 를 success 에서 처리하니 정상적으로 렌더링이 가능합니다.

하루의_spring · Answer

추가로 말씀드리면 success 가 길어져서 보기 싫으면 함수로 빼셔도 됩니다 $.ajax({ url: &#34;/get_data&#34;, type: &#34;GET&#34;, success: function(response){ data &#61; JSON.parse(response.result); _data &#61; data['data']; _labels &#61; data['label']; initChart(_data , _lables) }, }); function initChart(_data , _lables){ new Chart ~~~ } 이게 더 보기 좋을 수도 있습니다.

specemarker · Answer

답변 감사합니다^^ 좋은 하루 되세요.

ajax 를 활용한 chart.js 렌더링 질문드립니다.

4개의 답변

#chart.js 목록