DojoのCharting Engineのソースコードを眺める
1週間ほど前にAjaxianで知ったDojoのCharting Engine。
Ajaxian » Dojo Charting Engine Released
デモは以下。
http://archive.dojotoolkit.org/nightly/tests/charting/test_engine.html
折れ線グラフが描かれていて、画像ではないのですごいなぁ、と思ったので何で動いているのかちょっと調べてみました。
Dojoのサイトから0.4をダウンロード。解凍してディレクトリ名をdojoにすると
dojo/tests/charting/test_engine.html
に先ほどのデモと同じファイルがある。HTMLのソースを見るとdojo/dojo.jsが呼ばれている。このdojo.jsのソースは何やら変数名等が読みづらくなっている。
dojo.require(“dojo.charting.Chart”);
などで別ファイルのソースが呼び出されている。dojo.hostenv.getTextの中でdojo.hostenv.getXmlhttpObjectが呼び出されているので外部ファイルを呼び出す仕組みはAjax。で、取得したテキストをevalしている。
dojo/src/charting/Chart.js辺りが呼び出されていて、Firefoxの場合はdojo/src/charting/svg/がメインになる模様。これらのソースはコメントもインデントもあって読める。
JavaScript Cake Tutorials and Scripts
Firefoxのこれを使うとSVGのソースがHTMLの中で出力されているのがわかる。
<svg height="170" width="700" id="dojo-charting-plotarea-0"> <defs> <clipPath id="dojo-charting-plotarea-0-clip"> <rect height="120" width="630" y="20" x="50"> </rect> </clipPath> </defs> ...
さしあたって用途はないのですが、Dojoのスゴさの片鱗が見れました。