prog_cgi:グラフ_チャート_の描画
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
prog_cgi:グラフ_チャート_の描画 [2019/03/05 22:19] – [解説] hirohito | prog_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(" | ||
+ | |||
+ | |||
+ | 古いブラウザの場合、imgタグがSVG型式をサポートしていないかもしれません。その場合は、ファイル名はつけられませんが | ||
<object width=" | <object width=" | ||
行 73: | 行 78: | ||
===== html埋め込みを使う方法 ===== | ===== html埋め込みを使う方法 ===== | ||
+ | HTML5では、htmlの中にsvgを直接埋め込むことができます。 | ||
+ | |||
+ | |||
+ | ** 1. テンプレートファイルを用意します。** | ||
+ | |||
+ | <code html index.rhtml> | ||
+ | <%= header_section %> | ||
+ | <%= body_section %> | ||
+ | |||
+ | < | ||
+ | <%= @graph_svg %> | ||
+ | |||
+ | <%= footer_section %> | ||
+ | </ | ||
+ | |||
+ | |||
+ | **2. コントローラ (main.rb) 中で、SVG生成とテンプレートの適用を行います。** | ||
+ | |||
+ | |||
+ | <code ruby main.rb> | ||
+ | require " | ||
+ | require " | ||
+ | |||
+ | class GraphSampleController < AlController | ||
+ | def action_index() | ||
+ | ydata1 = [ 5, 3, 6, 3, 2, 5, 6 ] | ||
+ | |||
+ | graph = AlGraph.new | ||
+ | graph.set_mode( : | ||
+ | graph.set_mode( : | ||
+ | |||
+ | graph.add_data_line(ydata1) | ||
+ | @graph_svg = graph.draw_buffer | ||
+ | |||
+ | AlTemplate.run(" | ||
+ | end | ||
+ | end | ||
+ | </ | ||
+ | |||
+ | |||
+ | **3. 実行結果** | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | ==== 解説 ==== | ||
+ | |||
+ | この例では、ブラウザは一回のアクセスで終了します。\\ | ||
+ | action_index()内で、@graph_svg 変数へグラフデータを代入します。index.rhtmlテンプレートでは、そのSVGデータを含めて出力します。 | ||
+ | この方法は、一度のアクセスで転送が終わるため、プログラムが単純になるというメリットがあります。 | ||
prog_cgi/グラフ_チャート_の描画.txt · 最終更新: 2019/03/18 11:04 by hirohito