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