ユーザ用ツール

サイト用ツール


prog_cgi:グラフ_チャート_の描画

差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
prog_cgi:グラフ_チャート_の描画 [2019/03/05 22:19] – [解説] hirohitoprog_cgi:グラフ_チャート_の描画 [2019/03/18 11:04] (現在) – [解説] hirohito
行 64: 行 64:
 2つめは殆どのブラウザでグラフのみをSVG型式のファイルとして保存することが容易であることです。保存したグラフ画像は、Microsoft Word, PowerPoint 等に貼り付けて使うことができます。 2つめは殆どのブラウザでグラフのみをSVG型式のファイルとして保存することが容易であることです。保存したグラフ画像は、Microsoft Word, PowerPoint 等に貼り付けて使うことができます。
  
-古いブラウザの場合、imgタグがSVG型式をサポートしていないかもしれません。その場合は、objectタグを使って代用できます。+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>   <object width="320" height="240" type="image/svg+xml" data="<%=h Alone.make_uri(action:'graph_sample') %>"></object>
行 73: 行 78:
 ===== html埋め込みを使う方法 ===== ===== 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データを含めて出力します。
  
 +この方法は、一度のアクセスで転送が終わるため、プログラムが単純になるというメリットがあります。
  
  
  
prog_cgi/グラフ_チャート_の描画.txt · 最終更新: 2019/03/18 11:04 by hirohito