文書の過去の版を表示しています。

折れ線グラフ

基本的な使い方

テンプレートファイル

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

コード

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

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

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

    graph = AlGraph.new
    graph.add_data_line(ydata1)

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

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

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

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

サンプル

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

X軸ラベルの指定

  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

ラベル類の付与

  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

alone-doc

目次

折れ線グラフ

基本的な使い方

サンプル

X軸ラベルの指定

ラベル類の付与

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

第２Y軸の追加

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

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