グラフ（チャート）の描画

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

imgタグを使う方法

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

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

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

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

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

3. 実行結果

解説

この例では、ブラウザからのアクセスは２段階でおこなわれます。
まず１回目のアクセスで、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. テンプレートファイルを用意します。

index.rhtml

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

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

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

3. 実行結果

解説

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

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

alone-doc

目次

グラフ（チャート）の描画

imgタグを使う方法

解説

html埋め込みを使う方法

解説