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軸目盛ラベルモード (ver3.6以降)
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()
Y軸をログ軸にする(対数グラフ)
graph.y_axis.logarithmic()
軸タイトルの指示
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.x_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"
データ欠損時の線のひき方 (ver3.6以降)
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",...] # 任意ラベル表示の指示(ver3.6以降)
棒グラフ関連
色変更
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 · 最終更新: 2021/05/10 11:41 by hirohito