XYグラフ

基本的な使い方

テンプレートファイル

<!DOCTYPE html>
<img src="<%= Alone.make_uri(action:'graph_sample') %>">

コード

main.rb

require "alone"
require "al_graph_xy"
 
class GraphSampleController < AlController
  def action_index()
    AlTemplate.run("index.rhtml")
  end
 
  def action_graph_sample()
    xdata = [1.0, 2.0, 3.0, 4.0, 5.0]
    ydata = [1.0, 2.0, 3.0, 4.0, 5.0]
 
    graph = AlGraphXY.new
    graph.add_data(xdata, ydata)
 
    graph.draw
  end
end

まず、AlGraphXY.newで、グラフオブジェクトを準備します。 XYグラフでは、requireが'al_graph'から'al_graph_xy'に、クラスが AlGraphからAlGraphXYに変わる点にご注意ください。

add_data() メソッドを使い、引数としてXおよびY値の配列を渡します。

    graph = AlGraphXY.new
    graph.add_data(xdata, ydata)

最後に、draw メソッドで、svg を生成、出力します。

デフォルトでX及びY軸は自動計算され、与えられた値に従って適切な値が選ばれます。

データの与え方は、以下の3種類を用意しています。

データがペアになっている場合

graph.add_data_pair( [[x1,y1], [x2,y2], ...] )

１次元配列で渡す場合

graph.add_data_pair( [x1,y1, x2,y2, ...] )

X軸データとY軸データを別々の配列で渡す場合（上記例）

graph.add_data( [x1,x2,..], [y1,y2,...] )

サンプル

リリースファイルでサンプルとして提供しているものです。

単純なXYグラフ

def action_xy_sample_01
  # XとYを別々の配列で指定する方法
  xdata = [0.1, 1.0, 1.1, 1.2, 1.3, 1.0, 0.0]
  ydata = [5.0, 5.0, 4.9, 4.7, 4.0, 2.0, 0.0]
 
  graph = AlGraphXY.new
  graph.add_data(xdata, ydata)
 
  graph.draw
end

海水中の溶存酸素量

def action_xy_sample_02
  # 気象庁公開情報を参考にデータを引用
  # XとYをペアで指定する方法
  data1 = [[330,0],  [318,100], [180,200], [105,300], [70,400],  [44,500],
           [27,750], [37,1000], [50,1500], [80,2000], [108,2500]]
  data2 = [[220,0],  [220,100], [221,200], [200,300], [180,500], [118,750],
           [65,1000],[72,1500], [100,2000],[125,2500]]
  data3 = [[195,0],  [200,50],  [170,100], [100,150], [42,200],  [48,300],
           [63,400], [70,500],  [80,1000], [92,1500], [110,2000],[120,2500]]
  data4 = [[280,0],  [270,50],  [265,100], [268,200], [265,300], [240,400],
           [225,500],[210,1000],[205,1500],[205,2500]]
 
  graph = AlGraphXY.new(500, 500)
  graph.add_xaxis_title("溶存酸素量 (μmol/kg)")
  graph.add_yaxis_title("水深 (m)")
  graph.x_axis.at_labels[:format] = "%d"
  graph.y_axis.at_labels[:format] = "%d"
  graph.y_axis.reverse()      # Ｙ軸上下反転
 
  graph.add_data_pair(data1, "亜寒帯")
  graph.add_data_pair(data2, "亜熱帯")
  graph.add_data_pair(data3, "熱帯")
  graph.add_data_pair(data4, "日本海")
 
  graph.draw
end

alone-doc

目次

XYグラフ

基本的な使い方

サンプル

単純なXYグラフ

海水中の溶存酸素量