2008/12/13 土曜日 by kouichi
html5.0のcanvasライブラリが公開されています。
レーダーチャートやグラフなどが作れて優れものです。
折れ線グラフなどは
var rc = new html5jp.graph.radar("sample");
var items = [
["商品A", 5, 2, 4, 5, 3, 2, 4, 4],
["商品B", 3, 4, 3, 4, 5, 4, 5, 1]
];
var params = {
aCap: ["安さ", "性能", "デザイン", "人気", "使いやすさ", "寿命", "軽さ", "強さ"]
}
rc.draw(items, params);
という実装で、後はsampleというidのcanvasをHTML上に定義するだけでOKです。
使い勝手もなかなか良いです。
なお、IE7ではexcanvasが必要です。
ただ、ちょっとAjax対応できていないので、その当たりは改良が必要かと思います。
drawのリロード処理や、消去処理などちょっと工夫が必要です。
でも、いい感じですね。
グラフ作るのに、Flash使おうか、こちら使おうか迷います。
Posted in JavaScript | No Comments
2008/7/16 水曜日 by kouichi
YUIのbulidディレクトリをまるまるコピーすればよいかもではあるのですが、公開ディレクトリにたくさんファイルを置きたくないので、必要なファイルのみをjsディレクトリにコピーしました。
~-minというのはスペースや改行などを取り除いたファイルで容量も半分くらいになっています。
読み込む際にはこちらを使ったほうがいいですね。
<script src="/js/yahoo-min.js" type="text/javascript"></script>
<script src="/js/dom-min.js" type="text/javascript"></script>
<script src="/js/event-min.js" type="text/javascript"></script>
<script src="/js/connection-min.js" type="text/javascript"></script>
<script src="/js/json-min.js" type="text/javascript"></script>
<script> function request(param){ YAHOO.util.Connect.asyncRequest('GET', param, callback); } function callback(o){ var data = YAHOO.lang.JSON.parse(o.responseText); ・・・ } </script>
という感じでrequstにparamを設定してよびだせばOKです。
今となってはブラウザごとにhttpobjectを生成したりしなくていいわけですよね。
connection.js(connection-min.js)を見ると
if(method.toUpperCase() == 'GET' && (callback && callback.cache === false)){となっているので、GETの時キャッシュがちゃんときかないようになっています。
やっぱりライブラリ使っていくべきだなぁと実感しました。
でも、JavaScriptのライブラリはどれ使うか迷いますね。
Posted in JavaScript | No Comments