====== XYグラフ ====== ===== 基本的な使い方 ===== テンプレートファイル

コード


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

{{ :algraph:xy_sample_00.png?nolink&200|}} まず、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グラフ ===== {{:algraph:xy_sample_01.png?nolink |}}


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

===== 海水中の溶存酸素量 ===== {{:algraph:xy_sample_02.png?nolink |}}


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