alone-doc

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

Aloneには、折れ線グラフ、棒グラフ等のグラフ（チャート）の作成機能があります。
ここでは、簡単な折れ線グラフを作成してみます。

{{:prog_cgi:graph_line1.png?nolink|}}



===== imgタグを使う方法 =====

いくつかの利用方法がありますが、まずは最も簡単な imgタグを使って表示を行います。


**1. テンプレートファイルを用意します。**

<code html index.rhtml>
<%= header_section %>
<%= body_section %>

<p>グラフサンプル</p>
<img src="<%=h Alone.make_uri(action:'graph_sample') %>">

<%= footer_section %>
</code>


**2. コントローラ (main.rb) 中で、同テンプレートの適用およびグラフ作成用アクションを定義します。**

<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>

**3. 実行結果**

{{:prog_cgi:graph_line2.png?nolink|}}


==== 解説 ====

この例では、ブラウザからのアクセスは２段階でおこなわれます。\\
まず１回目のアクセスで、index.rhtmlテンプレートが適用され、画面全体が描画されます。
２回目は、ブラウザがimgタグに記されたURLをアクセスすることで発生し、action_graph_sample()が実行されます。
action_graph_sample()では、Aloneがグラフデータを生成し、ブラウザへ返します。\\
ここで使われるデータ形式は、SVG型式となります。

この方法を使うことで、いくつかのメリットがあります。\\
１つめはSVG型式であることで、表示を拡大しても画像が荒れることがありません。\\
２つめは殆どのブラウザでグラフのみをSVG型式のファイルとして保存することが容易であることです。保存したグラフ画像は、Microsoft Word, PowerPoint 等に貼り付けて使うことができます。

imgタグを使う場合のみ、ブラウザの右クリックで保存する時に使われるデフォルトのファイル名が指定できます（サポートしていないブラウザもあります）

  Alone.add_http_header("Content-Disposition: attachment; filename=graph1.svg")


古いブラウザの場合、imgタグがSVG型式をサポートしていないかもしれません。その場合は、ファイル名はつけられませんが objectタグを使って代用できます。

  <object width="320" height="240" type="image/svg+xml" data="<%=h Alone.make_uri(action:'graph_sample') %>"></object>




===== html埋め込みを使う方法 =====

HTML5では、htmlの中にsvgを直接埋め込むことができます。


** 1. テンプレートファイルを用意します。**

<code html index.rhtml>
<%= header_section %>
<%= body_section %>

<p>埋め込みグラフサンプル</p>
<%= @graph_svg %>

<%= footer_section %>
</code>


**2. コントローラ (main.rb) 中で、SVG生成とテンプレートの適用を行います。**


<code ruby main.rb>
require "alone"
require "al_graph"

class GraphSampleController < AlController
  def action_index()
    ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ]

    graph = AlGraph.new
    graph.set_mode( :NO_CONTENT_TYPE )     # この2行は最新版では必要ないかもしれませんが
    graph.set_mode( :NO_XML_DECLARATION )  # 互換性のために加えています。

    graph.add_data_line(ydata1)
    @graph_svg = graph.draw_buffer

    AlTemplate.run("index.rhtml")
  end
end
</code>


**3. 実行結果**

{{:prog_cgi:graph_line2.png?nolink|}}


==== 解説 ====

この例では、ブラウザは一回のアクセスで終了します。\\
action_index()内で、@graph_svg 変数へグラフデータを代入します。index.rhtmlテンプレートでは、そのSVGデータを含めて出力します。

この方法は、一度のアクセスで転送が終わるため、プログラムが単純になるというメリットがあります。