脱力駆動開発記

ゲームアプリを作るエンジニアの技術メモ

MENU

Railsでグラフ表示

お久しぶりです。
最近は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:id:cocokyoro:20140112032811p:plain

そして、グラフを複数重ねたい場合は、先ほどのコントローラのメソッド内の 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

すると、このようにグラフが重なります。

f:id:cocokyoro:20140112032810p:plain

グラフのサンプルはhttp://www.highcharts.com/demo/で確認できます。
細かいオプションは公式のリファレンス(http://api.highcharts.com/highcharts)を参考にすると良いようです。