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

コード


require "alone"
require "al_graph"

class GraphSampleController < AlController
  def action_index()
    AlTemplate.run("index.rhtml")
  end

  def action_graph_sample()
    ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ]

    graph = AlGraph.new
    graph.add_data_line(ydata1)
    graph.draw
  end
end

{{ :algraph:line_sample_01.png?nolink&200|}} まず、AlGraph.newで、グラフオブジェクトを準備します。折れ線グラフでは、add_data_line() メソッドを使い、引数としてY値の配列を渡します。この例では add_data_line() を一回呼んでいるので、ラインは１本です。


    graph = AlGraph.new
    graph.add_data_line(ydata1)

{{ :algraph:line_sample_01-2.png?nolink&200|}} add_data_line() を２回呼ぶと、ラインが２本描画されます。


    graph.add_data_line(ydata1)
    graph.add_data_line(ydata2)

最後に、draw メソッドで、svg を生成、出力します。デフォルトでY軸は自動計算され、与えられた値に従って適切な値が選ばれます。 ====== サンプル ====== リリースファイルでサンプルとして提供しているものです。 ===== X軸ラベルの指定 ===== {{:algraph:line_sample_02.png?nolink |}}


  def action_line_sample_02
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 13]

    graph = AlGraph.new
    graph.add_data_line(ydata1)
    graph.add_data_line(ydata2)

    graph.x_axis.set_labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);

    graph.draw
  end

===== ラベル類の付与 ===== {{:algraph:line_sample_03.png?nolink |}}


  def action_line_sample_03
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 13]

    graph = AlGraph.new
    graph.x_axis.change_mode(:CENTER)

    l1 = graph.add_data_line(ydata1, "Bob")
    l2 = graph.add_data_line(ydata2, "Alice")

    l1.add_data_labels
    l2.add_data_labels

    graph.x_axis.set_labels(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
    graph.add_main_title("Main title")
    graph.add_xaxis_title("X-Axis title")
    graph.add_xaxis_unit("(X-unit)")
    graph.add_yaxis_title("Y-Axis title")
    graph.add_yaxis_unit("(Y-unit)")

    graph.draw
  end

===== グリッド線のコントロール ===== {{:algraph:line_sample_04.png?nolink |}}


  def action_line_sample_04
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 13]

    graph = AlGraph.new

    graph.add_data_line(ydata1)
    graph.add_data_line(ydata2)

    graph.x_axis.clear_labels
    graph.x_axis.add_grid
    graph.x_axis.at_interval_marks[:stroke] = '#ff0fc0'
    graph.x_axis.at_interval_marks[:stroke_width] = 3
    graph.x_axis.at_interval_marks[:stroke_dasharray] = "6,3"

    graph.y_axis.clear_grid
    graph.y_axis.at_interval_marks[:length] = -5
    graph.y_axis.clear_scale_line

    graph.draw
  end

===== 第２Y軸の追加 ===== {{:algraph:line_sample_05.png?nolink |}}


  def action_line_sample_05
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [22.5, 24.8, 26.1, 25.3, 24, 23.5, 20.6]

    graph = AlGraph.new

    graph.add_data_line(ydata1, "on Y1")
    graph.add_data_line_y2(ydata2, "on Y2")
    graph.y_axis.clear_grid

    graph.draw
  end

===== スケール（軸）を指定（最大、最小、インターバル、上下反転） ===== {{:algraph:line_sample_06.png?nolink |}}


  def action_line_sample_06
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 13]

    graph = AlGraph.new

    graph.add_data_line(ydata1)
    graph.add_data_line(ydata2)

    graph.y_axis.max = 20
    graph.y_axis.min = -5
    graph.y_axis.interval = 5
    graph.y_axis.reverse

    graph.draw
  end

===== プロット線とマーカーを指定 ===== {{:algraph:line_sample_07.png?nolink |}}


  def action_line_sample_07
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 13]

    graph = AlGraph.new

    line1 = graph.add_data_line(ydata1, 'MarkerOnly')
    line1.color = 'yellow'
    line1.at_marker[:shape] = 'triangle'
    line1.clear_line

    line2 = graph.add_data_line(ydata2, 'LineOnly')
    line2.clear_marker

    graph.draw
  end