お久しぶりです。
最近はRubyばっかいじってます。
Ruby on Railsを使ってwebアプリを作っているのですが、その際にグラフ表示をしたくなりましていいgemないかなーと探してました。
そんで出会ったのがこちらのlazy-high-chartsです。
Highchartsというjavascript製のグラフ表示ライブラリがあるそうですが、それをrails上で使えるようにしたgemがlazy_high_chartsです。
導入についてはこちらの記事を参考にしました。RailsでHighcharts(lazy_high_charts)を使って綺麗なグラフを描画する - nishio-dens's diary
で例えばレーダーチャートを出力したいなんてときはコントローラに以下のようなメソッドを定義します。
def graph genre = ['Ruby','Java','Python','C++'] aData = [7,3,2,8] @graph = LazyHighCharts::HighChart.new('graph') do |f| f.chart(polar: true,type:'line') #グラフの種類 f.pane(size:'80%') #グラフサイズの比 f.title(text: '言語習熟度') #タイトル f.xAxis(categories: genre,tickmarkPlacement:'on') #categories:各項目の名前,tickmarkPlacement:'on'だとメモリ表示がカテゴリーの表示に沿う f.yAxis(gridLineInterpolation: 'polygon',lineWidth:0,min:0,max:10) #各項目の最大値やら f.series(name:'Aさん',data: aData,pointPlacement:'on') #各データ f.legend(align: 'right', verticalAlign: 'top', y: 70, layout: 'vertical') end end
そしてviewに
<%= high_chart("radar", @graph) %>
と書けばOKです。
こんな感じでグラフが出力されます。
そして、グラフを複数重ねたい場合は、先ほどのコントローラのメソッド内の f.xAxisという記述を新しいデータを用いてもう一度行います。
def graph genre = ['Ruby','Java','Python','C++'] aData = [7,3,2,8] bData = [4,5,9,1] #二件目のデータ @graph = LazyHighCharts::HighChart.new('graph') do |f| f.chart(polar: true,type:'line') f.pane(size:'80%') f.title(text: '言語習熟度') f.xAxis(categories: genre,tickmarkPlacement:'on') f.yAxis(gridLineInterpolation: 'polygon',lineWidth:0,min:0,max:10) f.series(name:'Aさん',data: aData,pointPlacement:'on') f.series(name:'Bさん',data: bData,pointPlacement:'on') #二件目のグラフ表示 f.legend(align: 'right', verticalAlign: 'top', y: 70, layout: 'vertical') end end
すると、このようにグラフが重なります。
グラフのサンプルはhttp://www.highcharts.com/demo/で確認できます。
細かいオプションは公式のリファレンス(http://api.highcharts.com/highcharts)を参考にすると良いようです。