IT・技術研修ならCTC教育サービス

サイト内検索 企業情報 サイトマップ

研修コース検索

コラム

Ruby & Rails

CTC 教育サービス

 [IT研修]注目キーワード   OpenStack  OpenFlow/SDN  情報セキュリティ  Python  システムトラブルシュート 

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

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

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

fig01

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

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

 具体的に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軸の範囲(データ列)の指定」、そして「2系統の時系列データ」をグラフに設定しました。

 次にビューを編集し、@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でコードを書くことに専念できます。 これは利点の一つと言えるでしょう。
 実際の画面をブラウザで確認してみましょう。

fig02

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

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

[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

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

fig03

もっと様々なグラフを!

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

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

fig03

 


 

 [IT研修]注目キーワード   OpenStack  OpenFlow/SDN  情報セキュリティ  Python  システムトラブルシュート