BLTのもっとグラフ

　「もっとグラフ」という名前のウィジェットがあるもんだと思われた皆様、 残念でした（コロス）さて、 BLTのグラフウィジェットには内部の構成要素にたくさんのオプションがあります。 これを全部覚えようとするとたいへんなので、 実験室ではどんなグラフを描きたいかに沿ってオプションを追加していく方法をとりました。 そのメモも兼ねて、いくつかの例をご紹介しましょう。

●複数の棒グラフを並べる
　まずは下のようなグラフでいきましょう。 関西５府県の人口(単位は万人)です。 ちなみに1992年のは大日本政府国土地理院お墨付きの1990年のデータですが、 2000年のはでっち上げなのでご注意を！ このように同じX軸、Y軸に対して複数の棒グラフを描くことができます。 注意しないといけないのは、BLTではデフォルトで同時に4つまで (X軸を2つ、Y軸を2つ)描くことができるのですが、 座標軸が違う棒グラフを複数描こうとすると後ろの棒が前の棒を隠してしまうのでうまくいきません。 そのような場合は後述の折れ線グラフを使うことになります。

スクリーンショット

ソースプログラムです。 

package require BLT
namespace import blt::*
namespace import -force blt::tile::*
wm title . "関西5府県の人口"

barchart .bc \
 -background "#808080" -barwidth 1 -plotbackground "#c0c0c0" \
 -plotrelief sunken -plotborderwidth 2 \
 -title "関西5府県の人口" -relief groove -bd 2 -barmode aligned

set x_dummy {1 2 3 4 5}
set Popu1992 {260 874 541 138 107}
set Popu2000 {280 844 521 166 125}

proc getPrefName {bc n args} {
    set prefName {dummy 京都 大阪 兵庫 奈良 和歌山}
    return [lindex $prefName $n]
}

.bc element create ELEM1992 -hide no \
  -xdata $x_dummy -ydata $Popu1992 -label "Survey 1992" \
  -fg "#700040" -bg white -relief sunken -stipple gray50 \
  -bindtags TagBarElems

.bc element create ELEM2000 -hide no \
  -xdata $x_dummy -ydata $Popu2000 -label "Survey 2000(uso)" \
  -fg "#006000" -bg white -relief sunken -stipple gray50 \
  -bindtags TagBarElems

.bc element bind TagBarElems <Button-1> {
    # invtransformはウィンドウ座標から座標軸の座標に変換します。
    # "invtransform"の後のxとかyとかは座標軸の名前です。
    set x [.bc axis invtransform x %x]
    set y [.bc axis invtransform y %y]
    tk_messageBox -message "Hello! $x $y"
}

# 座標軸はデフォルトでx,x2,y,y2の4つが定義されており、xとyはデフォルトで
# -hide no、x2とy2は-hide yesです。
.bc axis configure x \
  -color white -command getPrefName -title 府県 -titlecolor #c0c0c0 \
  -showticks 1

.bc axis configure y \
  -color white -min 0 -max 1000 -hide no -showticks 1 \
  -title "人口(万人)" -titlefont {{＠ＭＳ　ゴシック} 14 normal}

.bc legend configure -position right -relief groove -bd 2 \
  -font 7x14 -fg #000060
.bc grid configure -hide no -color "#808080" -dashes {1 4 1} \
  -mapx {} -mapy y

pack .bc -side top
pack [button .cmda -text 閉じたり -command exit] -anc e
# end.

棒グラフを並べるには、 barchartのelement createサブコマンドをその数だけ実行すればＯＫです。 当然、それらの-xdataは同じにしておかないといけません。 で、かっこいいことに、それらの並べ方をbarchartウィジェットの -barmodeオプションで指定できます。
  • infront: 後から表示する要素が前の要素の位置を上書きして表示
  • stacked: 積み上げ棒グラフにする
  • aligned: 横に並べる
  • overlap: 横に並べる(少しだけ前の要素に重ねる)
上の例では「aligned」を使っているので、 各棒がelement createした順番に左から右に並んでいます。

　ちなみにちょっと凝ってみるために、 棒グラフを陰つきにして３Ｄ感を出したりいろいろしていますけど、 「-stipple」を使うと描画がムッチャ遅くなるので、 普通は使わない方がよいでしょう。 -fgで純粋な色を指定するのがモアモアベターかと思います。

●複数の折れ線グラフを並べる
　これはすごい！帝国情報局のエージェントより入手した、 私立ときわ台小学校作成の極秘情報を我々はこの目で見ているのです！（コロス） このグラフを見ると、 O-157の大流行で世間を震撼させた1996年に、 明らかにサツマイモの生産が伸びていることが読み取れます（ウソばっかり）

スクリーンショット 

package require BLT
namespace import blt::*
namespace import -force blt::tile::*

wm title . "BLTのサンプル8 (やさいグラフ)"
graph .g -background "#808080" -plotbackground "#c0c0c0" \
 -plotrelief sunken -plotborderwidth 2 \
 -title "やさいグラフ(1年2組調べ)" -relief groove -bd 2

set x_dummy {1 2 3 4 5}
set TomoData {4040 4563 6512 7328 6684 5879}
set ImoData  { 340  328  457  813  489  507}

proc getYear {gc n args} {
    set y {dummy 1993 1994 1995 1996 1997 1998}
    return [lindex $y $n]
}

.g element create ELEM_AREA -hide no \
  -xdata $x_dummy -ydata $TomoData -label "とうもろこし(左)" \
  -color white -dashes {1 5 1} -fill #600000 -pixels 4 \
  -linewidth 1 -outline #f00000 -outlinewidth 1 -symbol square \
  -bindtags TagElems -mapy y -mapx x

.g element create ELEM_POPU -hide no \
  -xdata $x_dummy -ydata $ImoData -label "さつまいも(右)" \
  -color yellow -dashes {1 5 1} -fill #000060 -pixels 4 \
  -linewidth 1 -outline #0000f0 -outlinewidth 1 -symbol circle \
  -bindtags TagElems -mapy y2 -mapx x

.g element bind TagBarElems <Button-1> {
  tk_messageBox -message "Hello!"
}

# 座標軸はデフォルトでx,x2,y,y2の4つが定義されており、xとyはデフォルトで
# -hide no、x2とy2は-hide yesです。
.g axis configure x \
  -color white -command getYear -title 年 -titlecolor #c0c0c0 \
  -showticks 1

.g axis configure y \
  -color white -min 0 -max 10000 -hide no -showticks 1

.g axis configure y2 \
  -color white -min 0 -max 1000 -hide no -showticks 1

.g legend configure -position right -relief groove -bd 2 \
  -font 7x14 -fg #000060

.g grid configure -hide no -color "#808080" -dashes {1 4 1} \
  -mapx "" -mapy y
pack .g -side top -padx 4 -pady 4
pack [button .cmda -text 終了 -command exit] -anc e -padx 8
. configure -bg #206020
# end.

　棒グラフのときと同じようにelement createを違うデータに対して何度も行うと、 同じX軸、Y軸上に複数の折れ線グラフをプロットできるのですが、 それでは棒グラフの例とほとんど変わりません。 なのでここでは、異なるY軸上にそれぞれ折れ線グラフを描いてみます。

　それをするにはまず、graphウィジェットのaxis configure サブコマンドで二番目のY座標軸「y2」軸をコンフィギャーする必要があります。 特に、-hide noは必ずやってください。 Y2軸は「表示しない」のがデフォルトになっているからです。 特に操作しなければ、プライマリなY座標軸「y」軸が描画面左に、 「y2」軸が右に現れます。

　次にelement configureして各折れ線を作るときに、 -mapyオプションでその折れ線に対応するY座標軸を指定します。 ここではとうもろこしを左側の「y」軸に、さつまいもを右側の「y2」軸に対応させます。 ここまでの流れは簡単なのですが、 折れ線グラフの描画オプションをまとめておきましょう。 element configureやelement create で指定できる描画関係のオプションは次のような意味をそれぞれもちます：

  • -colorは線の色 (デフォルトは黒)
  • -dashesは線を破線にする場合のパターニング (デフォルトは{} … 実線表示)
  • -linewidthは線の幅 (デフォルトは零 … 線を描かずシンボルだけで表示)
  • -fillはシンボルの塗りつぶし色 (デフォルトは{} … 塗りつぶししない)、
  • -outlineはシンボルを囲む輪郭線の色 (デフォルトは{} … 輪郭線を描かない)
  • -outlinewidthは輪郭線の幅 (デフォルトは1)
  • -symbolはシンボルの形 (square, circle, diamond, plus, cross, splus, scross, triangle, {}=シンボルなしから選ぶ)
  • -pixelsはシンボルの大きさ
デフォルトではシンボル間を結ぶ線(折れ線)は出ないことにも注意が必要です。 また、デフォルトのシンボルのサイズは大きすぎるので、 -pixelsは必ず指定してサイズをダイエットさせましょう。

●折れ線グラフと棒グラフを一緒に表示する
　ふたつの折れ線グラフを表示する方法を応用すれば、 折れ線グラフと棒グラフを同時に描画面に描くのは簡単です。 基本姿勢はgraphウィジェットに、element create の代わりにbar createを使えば大ＯＫです。

スクリーンショット 

package require BLT
namespace import blt::*
namespace import -force blt::tile::*

wm title . "BLTのサンプル9 (やさいグラフ2)"
graph .g -background "#808080" -plotbackground "#c0c0c0" \
 -plotrelief sunken -plotborderwidth 2 \
 -title "やさいグラフ(1年2組調べ)" -relief groove -bd 2

set x_dummy {1 2 3 4 5}
set TomoData {4040 4563 6512 7328 6684 5879}
set ImoData  { 340  328  457  813  489  507}

proc getYear {gc n args} {
    set y {dummy 1993 1994 1995 1996 1997 1998}
    return [lindex $y $n]
}

.g element create ELEM_AREA -hide no \
  -xdata $x_dummy -ydata $TomoData -label "とうもろこし(左)" \
  -color white -dashes {1 5 1} -fill #600000 -pixels 4 \
  -linewidth 1 -outline #f00000 -outlinewidth 1 -symbol square \
  -bindtags TagElems -mapy y -mapx x

.g bar create ELEM_POPU -hide no \
  -xdata $x_dummy -ydata $ImoData -label "さつまいも(右)" \
  -fg #000060 -bg white -relief raised -bd 2 \
  -bindtags TagElems -mapy y2 -mapx x

.g element bind TagBarElems <Button-1> {
  tk_messageBox -message "Hello!"
}

.g axis configure x \
  -color white -command getYear -title 年 -titlecolor #c0c0c0 \
  -showticks 1

.g axis configure y \
  -color white -min 0 -max 10000 -hide no -showticks 1

.g axis configure y2 \
  -color white -min 0 -max 1000 -hide no -showticks 1

.g legend configure -position right -relief groove -bd 2 \
  -font 7x14 -fg #000060

.g grid configure -hide no -color "#808080" -dashes {1 4 1} \
  -mapx "" -mapy y
pack .g -side top -padx 4 -pady 4
pack [button .cmda -text 終了 -command exit] -anc e -padx 8
. configure -bg #206020
# end.

凡例も自動的に切り替わりますし芸が細かいですねー。

拡張レビュー分室 top
(first uploaded 2001/03/19 last updated 2002/03/09, MISUMI URANO - KAZUHISA ESHI)