グラフ描画

Aloneに付属するAlGraphライブラリは、グラフを描画してSVG形式の画像として表示するためのライブラリです。折れ線グラフ、棒グラフ、円グラフを描くことができます。グラフ描画サンプルはAlGraphで様々なグラフを描画するサンプルです。

AlGraphの基本的な使い方

al_graphの読み込み

折れ線グラフまたは棒グラフを描画する場合、requireメソッドでal_graphを読み込みます。円グラフを描画する場合はal_graph_pieを読み込みます。

require 'al_graph'

AlGraphオブジェクトの生成とデータのセット

AlGraphオブジェクトを生成し、折れ線のデータを格納した配列をオブジェクトにセットします。描画するグラフの種類によって、add_data_line以外にもいくつかのメソッドがあります。また、軸の目盛りの調整など、グラフの外観を変更するためのメソッドも用意されています。

データのセットなどが完了したら、AlGraph#drawまたはAlGraph#draw_bufferを呼び出すことでグラフのSVG画像のXMLが出力されます。drawメソッドは標準出力に、draw_bufferメソッドはメソッドの戻り値としてXMLを出力します。

    ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ]
 
    graph = AlGraph.new
    graph.add_data_line(ydata1)
 
    graph.draw

コントローラ内でのアクションの動的定義

graph/main.rb内では、以下のコードでアクションを動的に定義しています。中身がほぼ同じメソッドを大量に定義する代わりに、line_plot.rb、bar_plot.rb、pie_chart.rb内で定義されているサンプル描画用メソッドに対応するアクションをdefine_methodメソッドを使って定義されています。

  # LinePlot, BarPlot, PieChartの定義済みメソッド draw_sample_XX に対して
  # アクション action_line_XX, action_bar_XX, action_pie_XX を動的に定義
  [
    {:class => LinePlot, :action_prefix => 'action_line_'},
    {:class => BarPlot, :action_prefix => 'action_bar_'},
    {:class => PieChart, :action_prefix => 'action_pie_'}
  ].each do |item|
    item[:class].instance_methods.grep(/^draw_sample_/).each do |draw_method|
      action_method = draw_method.to_s.sub(/draw_/, item[:action_prefix])
      define_method(action_method) do
        graph = item[:class].new  # 例: graph = LinePlot.new
        graph.send(draw_method)   # 例: graph.draw_sample_01
      end
    end
  end

動的に定義を行わない場合、次のように同じようなメソッド定義を大量に記述することになります。

def action_line_01
  graph = LinePlot.new
  graph.draw_sample_01
end
 
def action_line_02
  graph = LinePlot.new
  graph.draw_sample_02
end
 
def action_line_03
  graph = LinePlot.new
  graph.draw_sample_03
end
 
・
・
・

グラフの描画

グラフ描画の流れを折れ線グラフをサンプルに説明します。グラフ描画サンプルの折れ線グラフでは、line_plotアクション(action_line_plotメソッド)で7個のサンプルグラフの描画を行っています。このアクションでは以下に示すように、テンプレートline_plot.rhtmlでHTMLを生成しクライアントに返しています。

  def action_line_plot
    AlTemplate.run('line_plot.rhtml')
  end

テンプレート内ではHTML内にSVG形式の画像を埋め込むための次のようなobjectタグがグラフの個数分記述されています。SVGを埋め込むためのobjectタグでは、dataタグでSVG形式の画像データのパスを指定します。グラフ描画サンプルではSVG形式のグラフ画像を出力するアクションのURLをAlone::make_uriメソッドで作成し指定しています。

<object width="320" height="240" type="image/svg+xml" data="<%= Alone::make_uri(:action => 'line_sample_01') %>"></object>

SVG画像の生成

SVG画像の生成はmain.rbの冒頭で動的に定義されたline_sample_XXアクションによって行われます。このメソッド内ではAlGraphによってSVGのXMLを生成しXMLを生成します。実際の画像の生成はline_plot.rb内で定義されたクラスで行われています。

  # 折れ線グラフ
  def draw_sample_01
    ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ]
 
    graph = AlGraph.new
    graph.add_data_line(ydata1)
 
    graph.draw
  end

目次