alone-doc

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 折れ線グラフ ======

===== 基本的な使い方 =====

テンプレートファイル
<code html index.html>
<!DOCTYPE html>
<img src="<%= Alone.make_uri(action:'graph_sample') %>">
</code>

コード
<code ruby main.rb>
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
</code>

{{ :algraph:line_sample_01.png?nolink&200|}}

まず、AlGraph.newで、グラフオブジェクトを準備します。

折れ線グラフでは、add_data_line() メソッドを使い、引数としてY値の配列を渡します。この例では add_data_line() を一回呼んでいるので、ラインは１本です。

<code>
    graph = AlGraph.new
    graph.add_data_line(ydata1)
</code>

{{ :algraph:line_sample_01-2.png?nolink&200|}}

add_data_line() を２回呼ぶと、ラインが２本描画されます。

<code>
    graph.add_data_line(ydata1)
    graph.add_data_line(ydata2)
</code>

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

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


====== サンプル ======

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


===== X軸ラベルの指定 =====

{{:algraph:line_sample_02.png?nolink |}}

<code ruby>
  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
</code>


===== ラベル類の付与 =====

{{:algraph:line_sample_03.png?nolink |}}

<code ruby>
  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
</code>

===== グリッド線のコントロール =====

{{:algraph:line_sample_04.png?nolink |}}

<code ruby>
  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
</code>


===== 第２Y軸の追加 =====

{{:algraph:line_sample_05.png?nolink |}}

<code ruby>
  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
</code>


===== スケール（軸）を指定（最大、最小、インターバル、上下反転） =====

{{:algraph:line_sample_06.png?nolink |}}

<code ruby>
  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
</code>


===== プロット線とマーカーを指定 =====

{{:algraph:line_sample_07.png?nolink |}}

<code ruby>
  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
</code>