alone-doc

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

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

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

コード
<code ruby main.rb>
class GraphSampleController < AlController
  def action_index()
    AlTemplate.run("index.rhtml")
  end

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

    graph = AlGraph.new
    graph.add_data_bar(ydata1, "bar1")
    graph.add_data_bar(ydata2, "bar2")

    graph.draw
  end
end
</code>

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

折れ線グラフとの違いは、add_data_lineメソッドの代わりにadd_data_barメソッドを使う点だけです。

まず、AlGraph.newで、グラフオブジェクトを準備します。 \\
add_data_barメソッドを使い、棒グラフを２本追加しています。 \\
最後に、draw メソッドで、svg を生成、出力します。

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


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

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


===== デフォルト（再掲） =====

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

<code ruby>
  def action_bar_sample_01
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 3]

    graph = AlGraph.new
    graph.add_data_bar(ydata1, "bar1")
    graph.add_data_bar(ydata2, "bar2")

    graph.draw
  end
</code>


===== 棒間隔を指定（詰める) =====

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

<code ruby>
  def action_bar_sample_02
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 3]

    graph = AlGraph.new
    graph.add_data_bar(ydata1, "bar1")
    graph.add_data_bar(ydata2, "bar2")

    graph.bar_plot.spacing = 0

    graph.draw
  end
</code>


===== 棒間隔を指定（開ける） =====

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

<code ruby>
  def action_bar_sample_03
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 3]

    graph = AlGraph.new
    graph.add_data_bar(ydata1, "bar1")
    graph.add_data_bar(ydata2, "bar2")

    graph.bar_plot.overlap = -100

    graph.draw
  end
</code>


===== 色、透明度アレンジ =====

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

<code ruby>
  def action_bar_sample_04
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 3]

    graph = AlGraph.new
    bar1 = graph.add_data_bar(ydata1, "yellow")
    bar2 = graph.add_data_bar(ydata2, "red")

    bar1.color = 'yellow'
    bar2.color = 'red'
    bar2.at_bar[:opacity] = '0.8'

    graph.bar_plot.overlap = 30
    graph.bar_plot.spacing = 50

    graph.draw
  end
</code>


===== 積み重ね棒グラフ =====

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

<code ruby>
  def action_bar_sample_05
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 3]
    ydata3 = [8, 1, 8, 5, 7, 3, 6]

    graph = AlGraph.new
    bar1 = graph.add_data_bar(ydata1, "bar1")
    bar2 = graph.add_data_bar(ydata2, "bar2", bar1)
    bar3 = graph.add_data_bar(ydata3, "bar3", bar2)

    graph.draw
  end
</code>


===== 棒グラフ　アレンジ例 =====

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

<code ruby>
  def action_bar_sample_07
    ydata1 = [ 7, 4, 6 ]
    ydata2 = [ 4, 5, 3 ]
    ydata3 = [ 2, 3, 5 ]

    graph = AlGraph.new

    b1 = graph.add_data_bar(ydata1, "Tennis")
    b2 = graph.add_data_bar(ydata2, "Volley", b1)
    b3 = graph.add_data_bar(ydata3, "Soccer", b2)
    b1.at_bar[:opacity] = '0.7'
    b2.at_bar[:opacity] = '0.7'
    b3.at_bar[:opacity] = '0.7'

    graph.bar_plot.spacing = 30

    graph.set_margin(nil, nil, 50, nil)
    graph.at_graph_area[:fill] = '#303030'
    graph.at_plot_area[:fill] = '#303030'
    graph.at_legend[:fill] = '#ffffff'
    graph.at_legend[:y] = 30
    graph.at_legend[:line_spacing] = 20

    graph.x_axis.add_grid
    graph.x_axis.at_scale_line[:stroke] = '#ffffff'
    graph.x_axis.at_interval_marks[:stroke] = '#ffffff'
    graph.x_axis.at_interval_marks[:stroke_dasharray] = '6,3'
    graph.x_axis.at_labels[:fill] = '#ffffff'
    graph.x_axis.set_labels(['Bob', 'Alice', 'Jane'])
    graph.x_axis.at_labels[:rotate] = -40

    graph.y_axis.at_scale_line[:stroke] = '#ffffff'
    graph.y_axis.at_interval_marks[:stroke] = '#ffffff'
    graph.y_axis.at_interval_marks[:stroke_dasharray] = '6,3'
    graph.y_axis.at_labels[:fill] = '#ffffff'
    graph.y_axis.max = 15
    graph.y_axis.min = 0
    graph.y_axis.interval = 5
    graph.y_axis.at_labels[:format] = '%.1f%%'

    graph.add_text(100, 235, '<tspan font-size="10" fill="#ffffff">The power to make your dream come true.</tspan>')

    graph.draw
  end
</code>


===== 棒グラフ　アレンジ例２（バックグラウンドイメージ） =====

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

<code ruby>
  def action_bar_sample_08
    ydata1 = [5, 3, 6, 3, 2, 5, 6]
    ydata2 = [0, 1, 4, 10, 9, 13, 3]

    graph = AlGraph.new
    graph.add_data_bar(ydata1, "bar1")
    graph.add_data_bar(ydata2, "bar2")
    graph.at_graph_area[:image] = "/img/Fabric.jpg"
    graph.at_plot_area[:opacity] = 0.5

    graph.draw
  end
</code>

（注意）2019/4現在、このサンプルのみ、どのブラウザでもimgタグでの表示は正常にできないことを確認しています。代わりにobjectタグを使って表示するか、Data URI scheme を使って画像を埋め込みしてください。