差分

このページの2つのバージョン間の差分を表示します。

--- algraph:棒グラフ [2019/04/07 18:54] – hirohito
+++ algraph:棒グラフ [2019/04/07 19:16] – [棒グラフ　アレンジ例２（バックグラウンドイメージ）] hirohito
@@ 行 45: / 行 45: @@
-デフォルト（再掲）
+===== デフォルト（再掲） =====
-{{:algraph:bar_sample_01.png?nolink|}}
+{{: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]
-{{:algraph:bar_sample_02.png?nolink|}}
+    graph = AlGraph.new
+    graph.add_data_bar(ydata1, "bar1")
+    graph.add_data_bar(ydata2, "bar2")
-棒間隔を指定（開ける）
+    graph.draw
+  end
+</code>
-{{:algraph:bar_sample_03.png?nolink|}}
-色、透明度アレンジ
+===== 棒間隔を指定（詰める) =====
-{{:algraph:bar_sample_04.png?nolink|}}
+{{: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]
-{{:algraph:bar_sample_05.png?nolink|}}
+    graph = AlGraph.new
+    graph.add_data_bar(ydata1, "bar1")
+    graph.add_data_bar(ydata2, "bar2")
-棒グラフ　アレンジ例
+    graph.bar_plot.spacing = 0
-{{:algraph:bar_sample_07.png?nolink|}}
+    graph.draw
+  end
+</code>
-棒グラフ　アレンジ例２（バックグラウンドイメージ）
-{{:algraph:bar_sample_08.png?nolink|}}
+===== 棒間隔を指定（開ける） =====
+{{: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タグを使って表示してください。