마나마나마
80
2016-11-24 17:36:42 작성 2016-11-24 17:47:22 수정됨
6
3098

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


안녕하세요!

하이차트를 이미지 저장하기 위해 html2canvas를 사용하여 캡쳐를 시도 중에 있습니다.

js에서 차트에 관한 코드를 작성하고 jsp에서 div로 불러오는 식으로 만들었습니다.


//JS 기본 highcharts 코드
$(function () { 
      $('#chart').highcharts({ 
         
             title: { 
                    text: 'Monthly Average Temperature', 
                    x: -20 //center 
             }, 
           ... (하이차트 기본 example 코드)
      }); 
   //////////////////////////////////////////////////////////////////////////////// 
   <!--jsp--> 
   <div id="chart" style="width:600px; height: 300px; margin: 0 auto"></div> 
   <canvas id="canvas" width="600" height="300" style="border:1px solid #999;"></canvas> 
   ///////////////////////////////////////////////////////////////////////////////// 
   //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를 잘못 써서 그런 걸 까요? 조언 부탁드립니다.

0
0
  • 답변 6

  • 자바1
    321
    2016-11-24 17:46:00

    canvas id="canvas" 에 < 가 빠져서 그런거 아닐까요?

    0
  • 마나마나마
    80
    2016-11-24 17:47:12

    자바1 아 이거는 제가 질문을 작성하면서 오타가 있었습니다.

    수정하겠습니다! 답변 감사드려요~

    0
  • 즈루시
    13k
    2016-11-24 17:48:57

    http://www.highcharts.com/docs/export-module/export-module-overview


    canvas 태그랑 겹치기만 해도 해당 이미지가 보이는게 맞나요?

    <canvas><div></div></canvas> 구조도 아니고...


    테스트하기보다 하이차트에서 제공하는 api 를 이용하는게 더 좋지 않을까 싶습니다.

    수고하세요~*

    0
  • 마나마나마
    80
    2016-11-24 17:53:28

    즈루시 

    api를 사용하는게 조금 어렵게 느껴져서 html2canvas를 사용하려고 했었습니다!

    api를 자세히 봐야 겠네요. 답변 감사드립니다 ^^

    0
  • Courage
    2k
    2016-11-24 19:14:58

    하이차트에서 기본으로 제공하는 플러그인 중 이미지나 csv로 export하는 플러그인을 제공합니다.

    해당 플러그인을 사용하시면 되겠습니다.

    0
  • 마나마나마
    80
    2016-11-24 20:22:47 작성 2016-11-24 20:23:09 수정됨

    Courage  저장해야 하는 경로가 서버 쪽 경로라

    하이차트 export 모듈을 사용하는 데 어려움을 겪어서 저렇게 만들었습니다!

    서버에 저장하기 위해서는 좀 복잡하더라구요!

    답변 감사합니다!

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.