RailsでHighcharts(lazy_high_charts)を使って綺麗なグラフを描画する
RalisでWebアプリケーションを作っていると、時々綺麗なグラフが描きたくなる場合があります。 例えば、在庫管理のWebシステムを作っているとして、在庫数の推移をグラフで表示したいなーなんて思う事があるわけです。
そんなときはHighchartsがオススメです。 下図のような高品質なグラフを簡単に生成することができます。
Highcharts自体はJavascriptで作られているので、どんな言語のWebアプリケーションにも組み込めます。 Railsなプロジェクトに組み込む際も、jsを駆使して直接Highchartsを使ってもよいです。 ただ、HighchartsをRailsで簡単に使うためのGem、lazy_high_chartsを公開してくれている方がいるので、今回はありがたくそちらを使わせていただくことにします。
lazy_high_charts導入
今回はruby-2.0.0p247 と rails4 な環境で導入してみます。
Gemfileに
gem 'lazy_high_charts'
と書いて、bundle installを実行しておきます。
その後、assets/javascripts/application.js に、以下の三行を追記します。
//= require highcharts/highcharts //= require highcharts/highcharts-more //= require highcharts/highstock
これで準備完了です。
lazy_high_chartsを使ってみる
試しに、在庫数の推移を表示するグラフを書いてみます。 controller内には下記のコードを記述します。
def index category = [1,3,5,7] current_quantity = [1000,5000,3000,8000] @graph = LazyHighCharts::HighChart.new('graph') do |f| f.title(text: 'ItemXXXの在庫の推移') f.xAxis(categories: category) f.series(name: '在庫数', data: current_quantity) end end
あとは、viewに以下の一行を記述すれば、Highchartsが利用できます。
<%= high_chart("sample", @graph) %>
実行結果は下図のようになります。
グラフの種類も、f.seriesにtype指定を追加するだけで簡単に変更できます。
例えば、円グラフを表示する場合は、以下のようなコードを書けばよいです。
def index data = [['DataA', 45.0],['DataB', 55.0]] @graph = LazyHighCharts::HighChart.new('graph') do |f| f.title(text: '円グラフサンプル') f.series(name: '在庫数', data: data, type: 'pie') end end
とても簡単にグラフが描けましたね。
より詳細な使い方は、lazy_high_chartsのドキュメント を参照してください。
どんなグラフが描けるのかを知りたかったら、Highchartsのデモサイト を参照してください。
便利なグラフ描画ライブラリなのですが、Highchartsは商用のプロジェクトで使おうと思うとライセンス費がかかります。(オープンソースなプロジェクトで利用する分にはライセンス費は必要ありません) ライセンス費については、http://shop.highsoft.com/highcharts.html を参照してください。