9

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

空飛ぶ円盤(xhtmlrenderer)を使ってグラフの画像をキャプチャしてみましたが、javascriptでグラフを作成しているのでうまくいきません。

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

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

4

3 に答える 3

9

Flot は HTML5<canvas>要素にグラフを描画します。したがって、考えられるシナリオは次のようになります。

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

ただし、このシナリオでは、画像に軸ラベルが表示されないことに注意してください。軸ラベルはキャンバスに描画されず、 で<div>配置された単純な要素であるためposition:relativeです。Flot に強制的にキャンバスにテキストを描画させる Flot プラグインを作者が提供しているこの投稿を見つけましたが、それが機能するかどうかはわかりません。 UPD:キャンバス上にラベルを描画する機能は、今後の 0.8 リリースに含まれています (コメントを参照)。

BUT 2凡例もキャンバスに描かれておらず、適切に配置されています<div>。Flot コミュニティの人々がこれで何かをしようとしているようです。私は 2 つのプル リクエストを見つけました。1 つはコアの変更、もう1つはプラグインの導入です。どちらも約 9 か月間マージされず、v. 0.9 マイルストーンがマークされています。少なくとも、それらの人々のリポジトリを複製して、彼らの作業をテストすることは可能です。

履歴書: Flot の周りの多くの人がこの問題に関心を持っていますが、悲しいことに、これを行うための安定したすぐに使える方法はまだありません。

于 2013-02-03T16:51:09.973 に答える
3

サーバー側でこれを行うことができ、Unix ベースのシステムを使用している場合は、wkhtmltopdfを試してみます。

しばらくしてから編集

現在、このサーバーサイドを行うには、素晴らしいphantomjsを使用します。私はしばらくの間、これを flot ベースのプロジェクトで使用してきましたが、完全に機能します。

于 2013-02-03T18:22:39.613 に答える