コラム

CTC教育サービス・ホーム　＞　コラム　＞　Ruby ＆ Rails　＞　第20回　Rubyでグラフを作成！　LazyHighCharts

Ruby ＆ Rails

CTC 教育サービス

[IT研修]注目キーワード Python UiPath(RPA) 最新技術動向 Microsoft Azure Docker Kubernetes

第20回　Rubyでグラフを作成！　LazyHighCharts (藺藤卓実) 2015年10月

　こんにちは。　ゼネットの藺藤です。

　さて突然ですが、「Rubyでプログラミングした後、得られたデータをグラフ化したい」という時、皆さんはどうしますか？
　今回はRubyを使って色々なグラフを描くことができる「LazyHighCharts」を紹介したいと思います。(*1)　 LazyHighChartとは、「HighCharts（*2）」というJavaScript製グラフライブラリをRubyでラップしたGemです。　元になっているHighCharts 自体、様々な種類のグラフに対応した便利なライブラリですが、これをRuby言語で平易に扱えるようにしたものです。　Railsアプリケーションで綺麗なグラフを描画したい場合に使えるでしょう。 LazyHighChartを使うと、例えば、次のようなグラフを描画できます。

　多くのケースでは、グラフを作成するときは次のようなフローに従うのではないでしょうか。

データストアからプログラムへのデータ読み込み
データの加工
グラフ描画（プレビュー、及び修正を加えて再描画）

　具体的にRailsを使ったWebアプリの場合を考えてみます。　この場合、Railsには「データの取得」と「データの加工・返却」までを担当させ、グラフの描画はJavaScriptのライブラリに任せることが多いかもしれません。
　もちろんこのようなやり方も悪くないのですが、サーバサイド(Rails側)で上記の(1)-(3)の全てを行ってしまいたい場合もあるでしょう。　例えば、「どのグラフを描くのかを、データの内容に応じて柔軟に変化させたい」といった場合にはサーバサイドで全てを行う方がより容易に実現できそうです。

　ここからは「（仮想の）X社の売上データをグラフ化する」ことを目標とし、実際にRailsを使ったサンプルアプリケーションを作ってゆきます。

LazyHighChartsの導入

　初めに、サンプル用の新しいRailsアプリケーションを作成します。　端末で次のコマンドを実行してください。

  rails new lazy_high_chart_sample

Gemfile には以下を追加してください。

[Gemfile]

  gem'lazy_high_charts'

Gemfileの変更点を反映させるため、「bundle install」コマンドを実行します。

    bundle install

まだ、このままではHighChartsを利用することはできません。　app/assets/javascripts/application.js に以下の行を追加します。

[application.js]

    //= require highcharts/highcharts
    //= require highcharts/highcharts-more
    //= require highcharts/highstock

ここまでの準備によりHighChartsが使えるようになりました。

グラフの描画

　新しいアクションを作成し、グラフを表示してみましょう。
　データの取得や加工については本稿の主題ではないため、ここではコントローラ内にダミーのデータを用意し、このデータを使ってグラフを描画することにします。　まずはコントローラとビューを用意しましょう。

    rails g controller sales index

SalesController および sales/index.html.erb のサンプルコードは以下の通りです。

[sales_controller.rb]

class SalesController < ApplicationController
  def index
    # (...データベースからのデータ取得処理...)
    # ダミーのデータを用意
    months = [ 4, 5, 6, 7, 8, 9 ]
    product_A_sales = [ 1_000_000, 1_200_000, 1_300_000,
      1_400_000, 1_200_000, 1_100_000 ]
    product_B_sales = [   300_000,   500_000,   750_000,
      1_150_000, 1_350_000, 1_600_000 ] 
    # グラフ（チャート）を作成 
    @chart = LazyHighCharts::HighChart.new("graph") do |c|
      c.title(text: "4-9月売上")
      c.xAxis(categories: months)
      c.series(name: "A", data: product_A_sales)
      c.series(name: "B", data: product_B_sales)
    end
  end
end

グラフオブジェクトは @chart 変数に渡すことにします。　この変数は、後にビューで利用します。
　LazyHighCharts::HighChart が今回使うライブラリです。　チャートのプロパティは、newに続くブロックの中で設定してゆきます。　上の例では、「グラフのタイトルの指定」、「X軸の範囲（データ列）の指定」、そして「２系統の時系列データ」をグラフに設定しました。

　次にビューを編集し、@chart が参照しているチャートデータを描画してみましょう。

[index.html.erb]

<h1>Sales#index</h1>
<p>Find me in app/views/sales/index.html.erb</p> 
<%= high_chart("my_chart", @chart) %>

ビューでは、 high_chart メソッドを呼び出します。　第1引数にはHTML内で用いるidの値を与えます。（例の場合では、CSSの記法に従うと"#my_chart"となります。）　第2引数にはコントローラ内で作成したチャートを渡します。　

　以上で描画までの準備は終わりです。　ここまでで見てきたとおり、JavaScript側の処理が隠ぺいされているため、プログラマはRubyでコードを書くことに専念できます。　これは利点の一つと言えるでしょう。
　実際の画面をブラウザで確認してみましょう。

２本の折れ線グラフを描画できました。

　さて、ひとまずグラフを描画することができましたが、まだ少し気になる部分があります。　例えば、縦軸・横軸が何の量を表しているのか説明がありません。　コントローラに幾つか記述を追加してみましょう。

[sales_controller.rb]

class SalesController < ApplicationController
  def index
    # (... 省略 ...)
    # グラフ（チャート）を作成 
    @chart = LazyHighCharts::HighChart.new("graph") do |c|
      c.title(text: "4-9月売上")
      # X軸の名称を設定 '月'
      c.xAxis(categories: months, title: {text: '月'})       # Y軸の名称を設定 '円'
      c.yAxis(title: {text: '円'})
      c.series(name: "A", data: product_A_sales)
      c.series(name: "B", data: product_B_sales)
      # 判例を右側に配置
     c.legend(align: 'right', verticalAlign: 'top', 
       x: -100, y: 180, layout: 'vertical')
     # グラフの種類を「折れ線グラフ」から「棒グラフ」に変更
     c.chart(type: "column")
    end
  end
end

この設定により、描画結果は次のようになりました。

もっと様々なグラフを！

ここまでの流れの中で、折れ線グラフや棒グラフを見てきました。　これらの他にも、パイチャート、積み上げ棒グラフ、散布図等、様々なタイプのグラフを利用できます。　どのようなタイプのグラフがあるのか、一度デモページをご覧になることをお勧めします。(*3)
グラフを作成する際に利用可能なオプション（引数）を調べるためには、本家サイトのAPIドキュメント(英語)が参考になります。(*4)　APIドキュメントに書かれているのはJavaScriptでの利用法ですが、ほとんどの例ではJavaScriptの配列やオブジェクトをそれぞれRubyの配列、ハッシュに読み替えるだけですので、特に困難は無いかと思います。
参考までに、初めにお見せした「面グラフ」と、上期総売り上げを表す「円チャート」の２つのサンプルコードを本コラムの最後に掲載します。(*付録A)

最後に、HighCharts は高機能なライブラリですが、非商用利用に限り無料で利用可能とのことですので、ライセンスにはお気を付け下さい。　逆に言えば、個人利用の範囲内であれば可視化ツールとして十分なパワーを持ったフリーのライブラリですのでご活用ください。

まとめ

今回はLazyHighChart (HighCharts)を紹介しました。 Railsを使ったアプリケーションでグラフを作成したいとき、手軽に使えるが機能も十分な、便利なライブラリではないかと思います。　非商用利用ならば "Free" とのことですので、ぜひ皆さんも一度お試しください。

それでは、Enjoy Ruby!

（注釈）

*1 「LazyHighChart」：　 https://github.com/michelson/lazy_high_charts

*2 「HighCharts」の本家ページ： http://www.highcharts.com/

*3 デモページ（英語）：　http://www.highcharts.com/demo

*4 APIリファレンスページ（英語）：　http://www.highcharts.com/docs

*付録A

面グラフの描画

[sales_controller.rb]

class SalesController < ApplicationController
  def index
    # (... 省略 ...)
    # グラフ（チャート）を作成 
    @chart = LazyHighCharts::HighChart.new("graph") do |c|
      c.title(text: "4-9月売上")
      c.xAxis(categories: months, title: {text: '月'})       c.yAxis(title: {text: '円'})
      c.series(name: "A", data: product_A_sales)
      c.series(name: "B", data: product_B_sales)
     c.legend(align: 'right', verticalAlign: 'top', 
       x: -100, y: 180, layout: 'vertical')
     # グラフの種類を「面グラフ」に変更
     c.chart(type: "area")
    end
  end
end

円グラフの描画

[sales_controller.rb]

class SalesController < ApplicationController
  def index
    # (... 省略 ...)
    # グラフ（チャート）を作成 
    @chart = LazyHighCharts::HighChart.new("graph") do |c|
      c.title(text: "製品別上期売上")
      c.series({
        colorByPoint: true,
        # ここでは各月の売上額合計をグラフの値とする
        data: [{
name: 'A',
y: product_A_sales.reduce{|sum,e| sum + e}
}, {
name: 'B', 
y: product_B_sales.reduce{|sum,e| sum + e}
}]
      })
      c.plotOptions(pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '{point.name}: {point.percentage:.1f} %',
        }
      })
      # グラフの種類として「パイチャート」を指定
      c.chart(type: "pie")
   end
  end
end

次のようなグラフになります。