Rails4 chart.jsのレーダーチャートをwicked_pdfでPDF出力 ※windows未対応

chart.jsで描画したレーダーチャートをwicked_pdfを使って、PDF出力する手順のメモ。

chart.jsで描画したレーダーチャートをwicked_pdfを使って、PDF出力しようとしたらうまくいかなかった。
wickee_pdf推奨のgem「wkhtmltopdf-binary」が更新されていないのが主な原因だった。
新たに「wkhtmltopdf-binary-11」というgemを見つけたので、これに差し替えた。

まず、Gemfileに下記を追加する。

gem 'wkhtmltopdf-binary-11'
gem 'wicked_pdf'

コマンドプロンプトでbundle installを実行する。

bundle insatall --path vendor\bundle

config/initializers/wicked_pdf.rbファイルを作成し、wkhtmltopdfのパスを記載する。

WickedPdf.config = {
  :exe_path => "#{Gem.loaded_specs['wkhtmltopdf-binary-11'].full_gem_path}/bin/wkhtmltopdf"
}

グラフの表示で、アニメーションをオフにする必要がある。

<!--レーダーチャートを描画する Canvas-->
<canvas id="canvas" width="300px" height="300px">
</canvas>

<%= javascript_include_tag "Chart" %>
<script>
  $(function() {
    // レーダーチャートで表示するデータを用意
    var radarChartData = {
      labels: ["スタミナ", "スピード", "テクニック", "パワー", "メンタル"],
      datasets: [
        {
          fillColor: "rgba(151,187,205,0.5)", // 線で囲まれた部分の色
          strokeColor: "rgba(151,187,205,1)", // 線の色
          pointColor: "rgba(151,187,205,1)",  // 点の色
          pointStrokeColor: "#fff",           // 点を囲む線の色
          data: [7,8,10,6,10]
        }
      ]
    };

    // Canvas にレーダーチャートを描画
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var chart = new Chart(context);
    var rader = chart.Radar(radarChartData, {
      scaleShowLabels: true,   // 目盛を表示
      pointLabelFontSize: 10,  // ラベルを表示
      animation: false         // アニメーションをオフに
    });
  });
</script>

※注意
windows環境では動作しない。

参考：
Rails4 wicked_pdfでPDF出力 ※windows未対応 - ayaketanのプログラミング勉強日記
Rails4 Chart.jsでレーダーチャートを表示する - ayaketanのプログラミング勉強日記
wkhtmltopdf-binary-11 | RubyGems.org | your community gem host