chart.jsからpdfへ

Question

を使用してcanvasを使用してグラフを作成し、canvasをpngに保存してpdfにインポートする方法について説明する記事が多数あります。これは問題ありませんが、画面上の部分をバイパスして、pdfドキュメントに直接移動してイメージを含める場合はどうしますか？

たとえば、私はcanvasを使用して画面上のグラフを開く2つのボタンを持つことができます。このページは、チャートを保存して問題なくPDFにインポートすることができます。もう一方のボタンはpdfを直接開きます。このドキュメントにチャートを入れることは可能でしょうか？それをサーバーに何らかの形で保存するかどうかですか？

私はd3に移行すると言われるかもしれないと思われますが、可能であればchart.jsで可能かどうか疑問に思っていましたか？

Answer 1

これは結構ですが、あなたは、画面の一部にバイパスして、PDF文書に直行したい画像

を含める場合は、まだエクスポートchart.jsをどのように使用することができますPhantomJs（チャートなしでHTMLページを開いてPDFで保存するヘッドレスブラウザ）を使用してPDFとして表示できます。 nodejsで作業している場合は、PhantomJを抽象化してPDFを簡単に作成できる良いライブラリがあります：https://github.com/sindresorhus/pageres。これは回避策のようですが、通常はPDFへのこれらのキャンバスはうまく描画されません、特にチャート！ （PhantomJsが印刷モードでPDFを作成するよう）

• が同じページ、およびvia CSS print styles, you can show/hide things that will print only on PDFを使用します。

  うん、あなたはまだしかし、あなたは、2つのオプションを持って、あなたのPDFファイルを印刷するには、HTMLページを作成する必要があります。

• 私はchart.jsは、私はクライアント側であるたかった何をするために得ることができなかったとして、これは直接質問に答えていませんが、私は良い解決策を見つけた唯一のPDF renderizationため

Answer 2

をカスタムWebページを作成します。 pChartを使用してください。 pdfが生成されると、チャートが作成され、pdfが終了するまで一時的にサーバーに保存されます。グラフがpdfに挿入され、サーバーからグラフが削除されます。画像のサイズを正しく設定するには少し操作が必要です。

$myPicture->render("path/imagename.png"); 

if (file_exists("path/imagename.png")) { 
    $ycurrent = $pdf->GetY(); 
    list($width, $height) = getimagesize("path/imagename.png"); 
    $imageWidth = 160; 
    $ratio = $imageWidth/$width; 
    $xpos = 25; 
    $pdf->Image("path/imagename.png", $xpos, $ycurrent, $width * $ratio, $height * $ratio, "png", ''); 
    unlink ("path/imagename.png"); 
}