wkhtmltopdfでグラフをPDFにするならC3.jsがオススメ！

当ブログでHTMLをPDF化できるwkhtmltodfの紹介をしました。

管理システムなどでWEBページをPDFにするときにグラフも付けたい場合があります。

最近はchart.jsなんかが人気ですが、chart.jsはなぜかPDF化できなかったりします。
バージョン下げたり、色々やればPDF化できるみたいですけど私はどう頑張ってもできませんでした。

ほかに何かPDF化できるライブラリないかな、と探していたところ以前紹介したC3.jsは簡単にPDF化できることがわかりました。

ということで今回はC3.jsのグラフをPDF化する方法を紹介します。

多少手を加える必要がありますが、簡単にPDF化できます！

まずは手を加える前のコード

グラフを表示するdivタグを記述します。
今回は円グラフとドーナツグラフを表示します。

<h2>円グラフ</h2>
<div id="pie_chart"></div>
<h2>ドーナツグラフ</h2>
<div id="donut_chart"></div>

続いて、円グラフとドーナツグラフを表示するスクリプトを記述。

//円グラフ
var pie_chart = c3.generate({
    bindto: '#pie_chart',
    data: {
        // iris data from R
        columns: [
            ['データ1', 30],
            ['データ2', 120],
        ],
        type: 'pie',
    }
});


//ドーナツグラフ
var donut_chart = c3.generate({
    bindto: '#donut_chart',
    data: {
        columns: [
            ['データ1', 30],
            ['データ2', 120],
        ],
        type: 'donut',

    },
    donut: {
        title: "ドーナツグラフタイトル"
    }
});

[btn class=”rich_pink”]デモ確認[/btn]

上記のコードだと、wkhtmltopdfでPDF化しようとしても真っ白になってしまいます。

コードに手を加える

上記のコードに手を加えます。

手を加えるといっても、divタグにwidthを付けるだけです。(heightだけはNG)

<h2>円グラフ</h2>
<div id="pie_chart" style="width:500px"></div>
<h2>ドーナツグラフ</h2>
<div id="donut_chart" style="width:500px"></div>

これでPDF化したときにグラフが表示されます。

最後に

wkhtmltopdfでPDF化した際にきちんと表示されるグラフ生成系のライブラリは少ないです。

一応個人的に確認ができたのはjqPlotぐらいです。
chart.jsはバージョン下げればいけるみたいですが、私はできませんでした(笑)

正直jqPlotはちょっとダサいので、これからはC3.jsを使っていこうと思います。