FLOT 데이터를 PDF로 쓸 이미지로

Question

그래프를 그리기 위해 jQuery/FLOT을 사용하고 있습니다. 사용자가 그래프의 PDF 버전을 다운로드 할 수있게하고 싶습니다. ColdFusion을 사용하여 PDF를 작성하고 있습니다. 그래프를 만든 다음 cf divocument를 사용하여 cf를 작성하는 CF 스크립트에 ajax를 통해 그래프 div의 html을 보냅니다. 문제는 PDF에서 실제 그래프 데이터가 아닌 축과 레이블 만 표시한다는 것입니다. 캔버스에서 동적으로 생성되는 실제 이미지를 얻는 방법을 아는 사람이 있습니까?

Answer 1

내가이 FLOT에서 구현되었다고 생각하지만 CutyCapt (http://cutycapt.sourceforge.net/를) http://code.google.com/p/flot/issues/detail?id=175

Answer 2

체크 아웃이 표시되지 않습니다, FLOT와 함께 작동하는 것으로 보인다. 생성 된 이미지가 단지canvas 것을

var canvas = $("canvas.base")[0]; 
var tmpimg = canvas.toDataURL("image/png"); 
//console.log(tmpimg); 
$("body").append('<img src="'+tmpimg+'"/>'); 

참고 :

Answer 3

또한 PDF 컨버터가 처리 할 수 ​​있어야하는 img 요소에 toDataURL() 및 대체를 사용하여 canvas의 스냅 샷을 할 수 내용 (즉, 그래프 자체)이며 축 또는 범례는 포함하지 않습니다. flot 위치 표시 자에서 이미지의 까다로운 대체/정렬을 수행해야 할 수도 있지만 시작하기에 적합한 이미지를 얻을 수 있습니다.

이것은 this question에 대한 대답의 약간의 재 작업이며 여기있는 누군가가 유용하다고 생각했습니다.

Answer 4

phantomJS (WebKit 엔진)과 같은 헤드리스 브라우저로 차트를 렌더링 할 수 있습니다.

URL을 가져 와서 출력을 Base64로 인코딩 된 문자열로 콘솔 스트림에 렌더링하거나 이미지를 작성하는 스크립트 만 필요합니다.

내가 아는 한, 브라우저를 사용하지 않는 유일한 방법입니다.

var page = require('webpage').create(); 
var system = require('system'); 

var pageUrl = system.args[1]; 

page.viewportSize = { width: 1280, height: 720 }; 
page.open(pageUrl , function() { 
    console.log(page.renderBase64('PNG')); 
    phantom.exit(); 
});