アーカイブ

2009 年 9 月 のアーカイブ

[Raphael]javascriptライブラリRaphaelを使ってみた

2009 年 9 月 22 日 コメントはありません

今回はjavascriptのベクターグラフィックライブラリであるRaphaelを紹介。

前回紹介したdojoライブラリでは細かいところまでいじれなかったため、Raphaelを使ってみることにした。

・使用方法

・Raphaelをダウンロードする
ここのページの右上からダウンロードできる。

・htmlファイルを作成する
上記でダウンロードしたjsファイルをインクルードする

  1.  <script src="../js/raphael/raphael.js" type="text/javascript"></script>
  2.   <script src="../js/raphael/sample.js" type="text/javascript"></script>
  3.  
  4.  <!-- body {  background: #fff;  color: #000; } #holder {  height: 700;  margin: auto;  margin-top: 50px;  width: 600px; } -->

・jsファイルを作成する
実際に描画する処理を書く

  1.  window.onload = function () {
  2.  // キャンバスを指定
  3.  var paper = Raphael("holder", 400, 400);
  4.  // 円を書く (x座標,y座標,半径)
  5.  var circle = paper.circle(200, 200, 100);
  6.  // 円の属性を指定する (fill:塗りつぶす色, stroke:ふちの色, storke-width:ふちの太さ)
  7.  circle.attr({"fill": "skyblue", "stroke": "#000", "stroke-width": 4});
  8.  // 四角を書く (左上のx座標, 左上のy座標, width, height)
  9.  var rect = paper.rect(220, 240, 30, 30);
  10.  // 四角の属性を指定する
  11.  rect.attr({"fill": "red"});
  12.  // 楕円を書く (x座標, y座標, x軸半径, y軸半径)
  13.  var ellipse = paper.ellipse(200, 100, 30, 40);
  14.  };

ちなみにサンプルはこちら

【参考】
http://www.skuare.net/test/raphael_1.html
http://raphaeljs.com/reference.html

カテゴリー: javascript タグ:

[JavaScript]dojox.chartingで円グラフを作ってみた

2009 年 9 月 7 日 コメントはありません

今回はdojo1.3を使ってグラフを作ってみたのでメモ。

javascriptでグラフを作成できるライブラリは他にもあったが、
・javascriptで記述している(画像を吐き出すわけではない)
・フリー(タダ)
・円グラフでonclickイベントが拾える(実装も簡単)
の理由からdojoを採用した。

時間が無かったので、ドキュメントのサンプルを参考に作成し、
データ項目をクリックした際にonclickイベントを取得できるようにした。

サンプル:http://y2-space.com/program/dojotest.html

【参考】
dojo:http://www.dojotoolkit.org/
リファレンス:http://api.dojotoolkit.org/jsdoc/1.3.2/dojox.charting
dojo.chartingリファレンス:http://docs.dojocampus.org/dojox/charting

カテゴリー: javascript タグ:
Get Adobe Flash player