본문 바로가기

프로그램

[JQUERY]JQPLOT 차트 이미지로 저장 처리

반응형

JQPLOT 차트 이미지로 저장 처리


* 목적

JQPLOT 차트를 이미지로 저장



메일링에 차트를 넣어달라는 요청이 있었다.

아무리 생각해도 방법이 없어서 차트를 이미지로 만든 후 이를 메일링 하기로 하였다.


JQPLOT 차트의 경우 이미지 저장에 대한 확장모듈이 존재하여 해당 모듈을 사용하였다.

(HTML5 의 CANVAS 를 활용한다.)


LIB URL

https://github.com/lsiden/export-jqplot-to-png


서비스 흐름

1. JQPLOT 으로 차트 생성

2. SETTIMEOUT을 통해 자동으로 차트 생성 펑션 호출

3. 윈도우 스케쥴러에 추가하여 매일 같은 시간에 작동


로직 흐름

1. jqplot 차트를 브라우져 화면에 생성

2. 버튼 클릭 시 canvas 를 이용하여 jqplot 차트를 이미지 문자열로 구함

3. 이미지 문자열을 textarea에 담아서 파일저장 페이지에 전송

4. 파일저장 페이지에서 받아서 저장

(export-jqplot-to-png 의 샘플을 그대로 사용하였음.)



원본은 이미 생성되었는지도 체크하고 메일도 보내지만 샘플이니 다 생략하였다.


export-jqplot-to-png 소스 중 jqplot 의 설정된 폰트를 가져오지 못하는 문제가 있어서 해당 부분은 다음과 같이 수정하였다.


변경전

newContext.font = $(el).getComputedFontStyle();

 

변경후

newContext.font = $(el).jqplotGetComputedFontStyle();





샘플을 이용하기 위해서는 c:\sample 폴더를 만들어야 한다.



샘플소스


jqplot_make_img_sample.zip