朝夕冷え込む季節になりましたが、お元気でしょうか・・・、と慣れない挨拶文はさておき。。。
前回の9月の記事ではchartkickについて紹介させていただきましたが、今回は、もう少し高度なグラフが描けるhighchartsについて紹介したいと思います。
■必要な環境
Ruby on Rails(推奨)
※Railsが無くても、highcharts.jsを読み込めば可能です。
※highchartsは商用で利用する場合はライセンスが必要です。
■HighChartsで描けるグラフ
以下のグラフが描けます。
●棒グラフ(column chart)
●折れ線グラフ (line chart)
●エリアグラフ (area chart)
●円グラフ (pie chart)
●散布図 (scatter chart)
他にも時計が描けたり、速度計を描けたりと、実に様々なグラフを描くことができます。
■lazy_high_chartsのインストール(Rails)
gemを追加し、application.jsで読み込むだけです。簡単ですね。
$ cd [Rails.root] $ vi Gemfile gem 'lazy_high_charts' $ bundle install
$ cd [Rails.root]/app/assets/javascript $ vi application.js //= require highcharts/highcharts //= require highcharts/highcharts-more //= require highcharts/highstock
■グラフの書き方
controllerでhighcharts用のインスタンス変数を作ります。
xAxis_categories = ['2013-11-09', '2013-11-10', '2013-11-11', '2013-11-12']
tickInterval = 2
data = [120, 80, 90, 150]
@graph_data = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'グラフのタイトル')
f.xAxis(categories: xAxis_categories, tickInterval: tickInterval)
f.series(name: 'データの名前', data: data, type: 'spline')
end
あとは、sample.html.erbファイルで以下のように書くだけです。
<%= high_chart("chart-1", @graph_data) %>
■出力結果以下のようにグラフが出力されます。
■複数タイプのグラフを混在させる場合
controllerで以下のようにf.seriesを複数指定します。
xAxis_categories = ['2013-11-09', '2013-11-10', '2013-11-11', '2013-11-12']
tickInterval = 2
data1 = [120, 80, 90, 150]
data2 = [1000, 800, 750, 1200]
@graph_data = LazyHighCharts::HighChart.new('graph') do |f|
f.title(text: 'グラフのタイトル')
f.xAxis(categories: xAxis_categories, tickInterval: tickInterval)
f.options[:yAxis] = [{ title: { text: 'y軸1のタイトル' }}, { title: { text: 'y軸2のタイトル'}, opposite: true}]
f.series(name: '棒グラフの名前', data: data1, type: 'column', yAxis: 1)
f.series(name: '折れ線グラフの名前', data: data2, type: 'spline')
end
■出力結果
以下のようにグラフが出力されます。 詳しくは、Highchartsのデモ、APIリファレンスで！
lazy_high_chartsのgithubはこちらです。
