WT-Toolkit コードリーディング(1)
使ってみて気になる点
連休中、WT-Toolkitを使って遊んでいました。ドキュメントを読みながらいくつかサンプルを作成していたのですが、挙動についていくつか気になったので調べてみることにしました。気になったのは以下の点です。
wtBarChart クラスをハック？してみる
グラフの描画のタイミングを調べるために、ライブラリのコード内部に alert() を追加しながら挙動を調べてみました。すると、結構不思議な事が分かりました。以下は、wtBarChartクラスに関しての結果です。
グラフ描画のタイミング
グラフは、基本的に、プロット点とグラフ領域(意味あってる？)からなるのですが、wtToolkitでは、
グラフを表示する領域(背景面など)は、コンストラクタが呼ばれた際に描画されているようです。
コンストラクタでは、このほかにフィールドの初期化をしています。コンストラクタでは、表示するデータは与えないので、バーについての描画はコンストラクタでは行われません。
グラフ描画の方法
グラフは、いくつかの矩形を組み合わせて作成されています。例えば、3Dグラフの描画領域は、「側面」、「底面」、「背景」の3つから面を組み合わせて作成します。基本となる矩形を作成し、それを回転、ゆがみなどを加えて立体的にしています。
同様に、wtBarChart のバー (wtBar) も、3つの矩形を組み合わせて作られています。さらにコードを追っかけてみると、
というように、結構綺麗な継承がなされていることが分かりました。SVGでも、複数のPathを組み合わせてグループ化してました (^^;)
内部変数が多く、setter、getterがない
JavaScript なんだから関係ねーよと思うかも知れませんが、内部変数が多く、それらへの変更等のアクセサが用意されていません。
特に、1本のバーの幅などは barWidth という変数に保持されていました。デフォルト値はなぜか 30 が設定されています。
さらに、バーと次のバーの間の幅と思われる barSpace については、間隔ではなく、バーの右下基準点から次のバーの右下基準点までの距離らしいです。(実際、この値を 0 にしたところ、全てのバーが重なってしまいました。)
他にも、透明度の初期値などもマジックナンバーが埋め込まれており、ちょっと分かりづらいです。
色が毎回異なる件
表示する度(F5を押す)色が変わる原因は、コンストラクタでグラフの色をジェネレータを使って生成しているからのようです。ただ、全てのバーを同じ色にしたかったり、自分の好みの色が使えないのもなんかいやです。
addBar(30, "White") # 値が30の白のバーを追加 とか addBar(40, "255,255,255") # 同上
とかできたらいいですよねー。さらに欲を言えば、
setBar(1, 40) # 1番目のバーの値を 40 にして再描画 とか setBarColor(1, "Pink") # 1番目のバーの色を Pink にして再描画
とかあるといいですねー。
再描画って強調してるのは、このグラフ、addBar したときに SVG が生成されるらしく、その後の変更ができないからです。
setBarValue(_index, _value, _color) ってのはあるんですけど、どうやら、値のラベルを変更するだけで、長さは変わりませんでした。(´・ω・｀)
簡単にまとめ
- wtToolkit のグラフ描画はコンストラクタで背景が描画される
- プロット点の描画は、要素の追加の際に行われる
- グラフはカラージェネレータで毎回色が変わる
- グラフは静的なもので変更に弱い
- 継承関係とかは割と好き♥
続きます・・・多分
