フロートグラフを使用したPDFレポートの作成

Question

私のクライアント用の自動レポート生成ツールを実装しようとしています。 私はpdf形式でレポートを作成する必要があります。私は、Jquery flotを使用してグラフを作成するのが非常に快適です。私は、PDF内のグラフを取得する方法が必要です。

私はフライングソーサー（xhtmlrenderer）を使ってグラフの画像をキャプチャしようとしましたが、グラフがJavaScriptによって作成されているようには見えません。

xhtmlrendererはjavascriptで作成された要素をキャプチャできますか？

またはグラフの画像をキャプチャできる他のツールですか？

Answer 1

Flotは、そのグラフをHTML5 <canvas>要素に描画します。以下のように考えられるシナリオは次のようになります。this answerで説明したように

1. はtoDataURLキャンバスから画像データを取得します。
2. jsPDFでPDFを作成し、最初の例のようにaddImageを使用して画像を埋め込みます。

しかしノート彼らはキャンバスに描かれていないので、このシナリオでは、あなたは彼らがposition:relativeと位置付けシンプル<div>要素であり、画像内の任意の軸ラベルは表示されません。私はthis postを見つけました。FlotがFlotにキャンバスにテキストを描画させるようなFlotプラグインを提供していますが、動作しているかどうかはわかりません。UPD：キャンバス上の描画ラベルは、oncoming 0.8リリース（コメント参照）に含まれています。

BUT凡例もキャンバス上に描画されていない、それはまた、適切に位置決め<div>あります。 Flotコミュニティの人々がこれを使って何かをしようとしているようだ、私はthe firstコアを修正する2つのプルリクエストを見つけた。the otherはプラグインを導入している。どちらも約9か月間に合併されず、v。0.9マイルストーンとマークされ、これは次のものであり、予定日はありません。少なくとも、それらの人たちを複製して作業をテストすることは可能です。

再開：FLOT周り多くの人々がこの問題に関係している、残念ながらまだそれを行うには安定し、アウト・オブ・ボックス方法はありません - 0.9が最終的にこの問題に時々出てくることを唯一の希望対処しました。

Answer 2

あなたがこのサーバサイドで行うことができ、あなたがUnixベースのシステムにいる場合、私はwkhtmltopdfを試してみるでしょう。今

EDITS SOME TIME AFTER

日、私は素晴らしいphantomjsを使用することになり、このサーバーサイドを行います。私はflotベースのプロジェクトでこれを使っていましたが、それは完全に機能します。

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