ユーザ用ツール

サイト用ツール


algraph:カスタマイズ

カスタマイズ

グラフサイズ指定

  graph = AlGraph.new( WIDTH, HEIGHT )
  graph = AlGraph.new( 600, 300 )

グラフ全体を囲む枠線を消す

  graph.at_graph_area[:stroke_width] = 0

マージンの指示

  graph.set_margin(nil, nil, 50, nil)

目盛軸(AXIS)関連

X軸目盛にインターバル線を表示しない

  graph.x_axis.clear_interval_marks()

X軸目盛ラベル指定

  graph.x_axis.labels = [...]

X軸目盛ラベルモード (ver4以降)

  graph.x_axis.mode_label = :LABEL_NORMAL      # 測定データ配列とラベル配列が1:1で対応
  graph.x_axis.mode_label = :LABEL_INTERVAL    # インターバル線とラベル配列が1:1で対応

Y軸最大、最小、メモリ幅の指示

  graph.y_axis.max = 200
  graph.y_axis.min = -60
  graph.y_axis.interval = 20

Y軸反転

  graph.y_axis.reverse()

軸タイトルの指示

  graph.add_xaxis_title( "xxx" )
  graph.add_yaxis_title( "yyy" )

軸単位の指示

  graph.add_xaxis_unit( "xxx" )
  graph.add_yaxis_unit( "yyy" )
  graph.add_y2axis_unit( "yyy" )

目盛ラベル表示フォーマット指示

  graph.y_axis.at_labels[:format] = "%5.2f"

フォント指定

  graph.y_axis.at_labels[:font_size] = 10
  graph.y_axis.at_labels[:font_family] = "sans-serif"
  graph.y_axis.at_labels[:font_weight] = 400
  graph.y_axis.at_labels[:font_style] = "italic"

テキストの揃え位置

  graph.y_axis.at_labels[:text_anchor] = "middle"  # start, end, middle

テキスト装飾

  graph.y_axis.at_labels[:text_decolation] = "underline"

テキスト回転

  graph.y_axis.at_labels[:rotate] = 90

テキスト表示に独自レンダラを使用する

  graph.y_axis.at_labels[:renderer] = lambda {|v|
    v.to_s.reverse.gsub( /(\d{3})(?=\d)/, '\1,').reverse    # 数値コンマ3桁区切り表示
  }

折れ線関連

折れ線表示属性の指示

  line = graph.add_data_line( ydata )
  line.color = "#012345"      # 色指定
  line.at_marker[:shape] = 'triangle' # マーカーシェープ指定
  line.clear_line             # 線を描画しない
  line.clear_marker           # マーカーを描画しない

個別マーカーのアトリビュート指示

  line.at_marker_several[2] = { :shape=>:rectangle, :size=>20 }

折れ線への任意ID付与

  line.id = "ANY-TEXT"

データ欠損時の線のひき方 (ver4以降)

  line = graph.add_data_line(ydata1)
  line.mode_missing_data = :MODE_CONTINUOUS    # 直線補完する(デフォルト)
  line.mode_missing_data = :MODE_BREAK         # 線を途切れさせる

データラベル表示関連

  line.add_data_labels("CENTER")                 # データラベルの表示を指示
  line.at_data_labels[:font_size] = 30           # 表示アトリビュート指示 font_size, stroke, fill等
  line.at_data_labels[:format] = "%.2f"          # 値表示フォーマット
  line.labels = ["Label1","Label2",...]          # 任意ラベル表示の指示(ver4以降)

棒グラフ関連

色変更

  bar1 = graph.add_data_bar(ydata1)
  bar1.color = 'yellow'

重ね合わせ

  bar1 = graph.add_data_bar(ydata1, "bar1")
  bar2 = graph.add_data_bar(ydata2, "bar2", bar1)

凡例(Legend)関連

位置の調整

  graph.at_legend[:y] = 30

行間の調整

  graph.at_legend[:line_spacing] = 20

フォントサイズの調整

  graph.at_legend[:font_size] = 15

その他

棒グラフ等の色リスト変更

  graph.color_list = ["#7ec87d", "#6fcadf", "#fb9777", "#e88cb1" ]

注意)個別の色変更は、set_colorメソッドで行うことができる。

任意テキストの追加

  graph.add_text( 100, 150, "文字列" )

任意SVGタグの追加

  graph.add_aux_tag( "<tag>..." )

出力関連

SVG出力先の変更

  graph.draw                  # 標準出力へ
  str = graph.draw_buffer     # 変数へ

出力モードの変更

デフォルト動作

CONTENT_TYPE XML_DECLARATION
draw O O
draw_buffer x x

CONTENT_TYPE : httpヘッダ "Content-Type: image/svg+xml"を出力する/しない
XML_DECLARATION : XML宣言およびDOCTYPE宣言を出力する/しない

httpヘッダ "Content-Type: image/svg+xml"を出力する/しない

  graph.set_mode( :CONTENT_TYPE )
  graph.set_mode( :NO_CONTENT_TYPE )

XML宣言およびDOCTYPE宣言を出力する/しない

出力時に、<?xml…> 行と、<!DOCTYPE svg …> 行を出力するか。

  graph.set_mode( :XML_DECLARATION )
  graph.set_mode( :NO_XML_DECLARATION )

SVGタグを出力しない

出力時に、<svg…> タグを出力するか。
上記、:NO_XML_DECLARATIONと組み合わせて使うべきでしょう。

  graph.set_mode( :NO_SVGTAG_START )   # SVG開始タグを出力しない
  graph.set_mode( :NO_SVGTAG_END )     # SVG終了タグを出力しない

描画アトリビュート

SVGの属性指定方法と、殆どの場合で同じ指示が使えます。

  bar2 = graph.add_data_bar(ydata2, "red")
  bar2.at_bar[:opacity] = '0.8'
algraph/カスタマイズ.txt · 最終更新: 2019/04/10 12:14 by hirohito