하이차트 이미지 저장 질문입니다!

Question

안녕하세요! 하이차트를 이미지 저장하기 위해 html2canvas를 사용하여 캡쳐를 시도 중에 있습니다.js에서 차트에 관한 코드를 작성하고 jsp에서 div로 불러오는 식으로 만들었습니다. //JS 기본 highcharts 코드 $(function () { $('#chart').highcharts({ title: { text: 'Monthly Average Temperature', x: -20 //center }, ... (하이차트 기본 example 코드) }); ////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////// //button $("#test_btn").on('click', function(){ html2canvas($("#chart"),{ onrendered: function(canvas) { var imageData = canvas.toDataURL("image/png"); var binary = imageData.split(',')[1]; console.log(binary); $.ajax({ url:'서블릿 명', type:'post', data:{ bin_data : binary } }).then(function(result){ //성공 콜백 }), function(error){ //500 } } }); }); 위에 코드를 사용해서 캡쳐를 하면 아무 것도 없는 빈 화면이 저장 됩니다.차트가 그려진 div 에서 canvas으로 아무런 데이터가 캡쳐되지 않아서 생기는 문제 같습니다.제가 html2canvas를 잘못 써서 그런 걸 까요? 조언 부탁드립니다.

자바1 · Answer

canvas id&#61;&#34;canvas&#34; 에 < 가 빠져서 그런거 아닐까요?

마나마나마 · Answer

자바1 아 이거는 제가 질문을 작성하면서 오타가 있었습니다.수정하겠습니다! 답변 감사드려요~

즈루시 · Answer

http://www.highcharts.com/docs/export-module/export-module-overview canvas 태그랑 겹치기만 해도 해당 이미지가 보이는게 맞나요?

구조도 아니고... 테스트하기보다 하이차트에서 제공하는 api 를 이용하는게 더 좋지 않을까 싶습니다.수고하세요~*

마나마나마 · Answer

즈루시 api를 사용하는게 조금 어렵게 느껴져서 html2canvas를 사용하려고 했었습니다!api를 자세히 봐야 겠네요. 답변 감사드립니다 ^^

Courage · Answer

하이차트에서 기본으로 제공하는 플러그인 중 이미지나 csv로 export하는 플러그인을 제공합니다.해당 플러그인을 사용하시면 되겠습니다.

마나마나마 · Answer

Courage 저장해야 하는 경로가 서버 쪽 경로라하이차트 export 모듈을 사용하는 데 어려움을 겪어서 저렇게 만들었습니다!서버에 저장하기 위해서는 좀 복잡하더라구요!답변 감사합니다!

하이차트 이미지 저장 질문입니다!

6개의 답변

#export 목록