플로트 그래프로 PDF 보고서 작성

Question

클라이언트 용 자동 보고서 생성 도구를 구현하려고합니다. PDF 형식으로 보고서를 작성해야하며 Jquery 플로트를 사용하여 그래프를 작성하는 것이 매우 편합니다. 난 그냥 PDF 안에 그래프를 얻을 수있는 방법이 필요합니다.

플라잉 받침대 (xhtmlrenderer)을 사용하여 그래프의 이미지를 캡처했지만 그래프로 볼 때 자바 스크립트로 생성되지 않았습니다.

xhtmlrenderer는 javascript로 만든 요소를 ​​캡처 할 수 있습니까?

또는 그래프의 이미지를 캡처 할 수있는 다른 도구입니까?

Answer 1

Flot은 HTML5 <canvas> 요소에 그래프를 그립니다. this answer에 설명 된대로

1. 가 toDataURL 캔버스에서 이미지 데이터를 검색 다음과 같이 그래서 가능한 시나리오가 될 수 있습니다.
2. jsPDF으로 PDF를 만들고 첫 번째 예와 같이 addImage을 사용하여 이미지를 이미지에 포함합니다. 그들은 캔버스에 그려진되지 않기 때문에 당신은 이미지의 모든 축 레이블이 표시되지 않습니다이 시나리오에서

하지만 참고, 그들은 position:relative 위치 간단한 <div> 요소입니다. 나는 Flot이 캔버스에 텍스트를 그려야하는 Flot 플러그인을 제공하는 곳에서 this post을 발견했으나 그것이 작동하는지 전혀 모른다.UPD : 캔버스의 도면 레이블은 oncoming 0.8 릴리스에 포함되어 있습니다 (주석 참조).

BUT 2^{범례도 캔버스에 그려진되지 는 또한 적절하게 위치 <div>이다. Flot 커뮤니티의 사람들이 이것으로 무언가를하려고하는 것처럼 보입니다. 나는 두 가지 요청을 발견했습니다. the first 코어를 수정하면 the other 플러그인을 도입합니다. 그들 중 어느 것도 약 9 개월 동안 합병되지 않고, 그들은 다음 단계이고 다음 기한이없는 v. 0.9 이정표로 표시됩니다. 적어도 그 사람들을 수집하여 작업을 테스트 할 수 있습니다.}

이력서 : FLOT 주위 많은 사람들이이 문제에 관심을하지만, 슬프게도 아직 아웃 오브 박스 그것을 할 방법, 더 안정적이 없습니다 - 0.9 마침내이 문제로 가끔 나올 것 만 희망 해결되었습니다.

Answer 2

당신이이 서버 사이드를 할 수 있고 당신이 유닉스 기반 시스템에 있다면, 나는 wkhtmltopdf을 시도 할 것입니다. 약간의 시간이 이제

며칠 AFTER

편집, 나는 멋진 phantomjs 사용하는 것이이 서버 쪽을 할 수 있습니다. 나는 한동안 플롯 기반 프로젝트에서 이것을 사용 해왔고 완벽하게 작동합니다.

Answer 3

Flot + Html2Canvas + jsPDF로이를 수행하는 방법의 예제와 함께 JSFiddle을 작성했습니다. 내 보낸 PDF에는 축, 범례 등이 포함됩니다.:

html2canvas($("#placeholder").get(0), { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 

    var imgData = canvas.toDataURL('image/png'); 
    var doc = new jsPDF('landscape'); 

    doc.addImage(imgData, 'PNG', 10, 10, 190, 95); 
    doc.save('sample-file.pdf'); 
    } 
}); 

JS Fiddle