テンプレートファイル
<!DOCTYPE html> <img src="<%= Alone.make_uri(action:'graph_sample') %>">
コード
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], ...] )
1次元配列で渡す場合
graph.add_data_pair( [x1,y1, x2,y2, ...] )
X軸データとY軸データを別々の配列で渡す場合(上記例)
graph.add_data( [x1,x2,..], [y1,y2,...] )
リリースファイルでサンプルとして提供しているものです。
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() # Y軸上下反転 graph.add_data_pair(data1, "亜寒帯") graph.add_data_pair(data2, "亜熱帯") graph.add_data_pair(data3, "熱帯") graph.add_data_pair(data4, "日本海") graph.draw end