ウェブ木箱：VML棒グラフ



	トップページ＞ JavaScript ＞クラスライブラリ集＞ VML棒グラフ

VML棒グラフ
ver.1.0

	◆サンプル
＜機能と特徴＞


棒グラフのVMLデータを生成するクラス。大きさ、項目表示の有無など切り替え可能。 Internet Explorer5.0以上のみの対応です。

公開日

2005.7.10

最終更新日

---

バージョン

ver 1.0

動作確認

IE5.0	IE6.0	~~NN4.7~~	~~NN6.2~~	~~NN7.0~~
~~Opera7.5~~		~~FireFox1.0~~

取扱難易度

★★★☆☆

cookie

不使用

CSS

使用

更新履歴

---

使い方

メソッド・プロパティ

注意・制限事項

このクラスを使用する際はまず初めにオブジェクトを生成してください。第１引数はグラフの上限の数値、第２引数はグラフの数値データの配列を指定してください。

例：オブジェクトを生成し変数objに代入

    data = new Array(580,260,910,600,360);
    obj  = new b_graph(1000,data);

予め設定した初期設定と異なる設定を適用したい場合は VML出力メソッドを呼び出す前に変更してください。

例：グラフの３番目の色を変更する

    obj.color[2] = "#000000";

準備が出来たらVML出力メソッドを呼び出します。棒グラフはdrow()、項目表示はadd()です。

例：棒グラフ(100*100)と項目表示を並べて表示

    list = new Array("項目A","項目B","項目C");

    document.write(obj.drow(100,100));
    document.write(obj.add(10,10,"12px",list));

VMLを使用するページには次のスタイルシートを <head>～</head>の間に書き込んでください。

    <style>
    v\:* { behavior: url(#default#VML); }
    </style>

メソッド・プロパティ

注意・制限事項

■対象オブジェクト－b_graphオブジェクト(このクラスよって追加)

■インスタンス

c_graph()	棒グラフデータを扱うオブジェクトを生成します。【戻り値：b_graphオブジェクト】
	引数	意味と形式
	第１引数(必須)	グラフのデータの上限を指定します。 [形式]数値
	第２引数(必須)	棒グラフのデータを指定します。 [形式]数値の配列

■メソッド一覧

drow()	第１引数と第２引数で指定したサイズの棒グラフのVMLデータを出力します。【戻り値：棒グラフのVMLデータ】
	引数	意味と形式
	第１引数(必須)	棒グラフの横幅を指定します。 [形式]正の整数
	第２引数(必須)	棒グラフの縦幅を指定します。 [形式]正の整数
add()	項目表示のVMLデータを出力します。【戻り値：円グラフのVMLデータ】
	引数	意味と形式
	第１引数(必須)	項目表示中の色表示の横幅を指定します。 [形式]正の整数
	第２引数(必須)	項目表示中の色表示の縦幅を指定します。 [形式]正の整数
	第３引数	項目表示中のフォントのサイズを指定します。 [形式]CSS形式
	第４引数	棒グラフの項目を指定します。 [形式]配列

■プロパティ一覧

color[i]

グラフの棒の色。配列で指定します。
[形式]RGB値、または色名

メソッド・プロパティ

注意・制限事項

現在は特にありません。

<script language="JavaScript" type="text/javascript">
<!--//copyright(C) 2005 あう http://www5c.biglobe.ne.jp/~horoau/
    //ver1.0

//棒グラフクラス
function b_graph()
{
 this.color    = new Array();
 this.data     = new Array();
 this.title    = new Array();
 this.vml_data = '';
 this.vml_list = '';

 //設定
 this.color[0] = "#f6537f"; //グラフの色
 this.color[1] = "#b6e881";
 this.color[2] = "#7b78ef";
 this.color[3] = "#f9b652";
 this.color[4] = "#8c56cd";
 this.color[5] = "#58c6dc";
 this.color[6] = "#f157b1";
 this.color[7] = "#e8e81c";
 //ここまで

 //コンストラクタ
 if(!document.all  && navigator.userAgent.indexOf("Opera") != -1)
 {return;}
 //引数解析
 if(!arguments[0] || !arguments[1])
 {return undefined;}
 var max = arguments[0];
 for(i=0;i<arguments[1].length;i++)
 {this.data[this.data.length] = arguments[1][i];}

 //データ集計
 //グラフ横幅
 var length = arguments[1].length*200+100;
 
 //縦過剰座標分
 var over = 0;
 for(i=0;i<this.data.length;i++)
 {//グラフ座標
  this.data[i] = Math.round(this.data[i]/max*1000);
  if(over < this.data[i])
  {over = this.data[i];}}
 if(over > 1000)
 {over = over-1000;}
 else
 {over = 0;}

 //コンストラクタここまで

 //グラフ出力
 this.drow = function (width,height)
 {//非対応ブラウザメッセージ
  if(!document.all  && navigator.userAgent.indexOf("Opera") != -1)
  {return 'InternetExplorer5.0以上ならグラフが表示されます。';}
  this.vml_data = "";
  //VMLデータ生成
  this.vml_data += '<v:group style="width:1000px; height:1000px;">\n';
  for(i=0;i<10;i++)
  {this.vml_data += '<v:line from="0,'+(over+(i*100))+'" to="'+length+','+(over+(i*100))+'" strokecolor="#cccccc" strokeweight="1" />\n';}

  for(i=0;i<this.data.length;i++)
  {this.vml_data += '<v:rect style="width:100px;height:'+(this.data[i])+'px;position:relative;top:'+(1000-this.data[i]+over)+'px;left:'+(i*200+100)+'px;"\n';
   this.vml_data += ' fillcolor="'+this.color[i]+'" strokecolor="'+this.color[i]+'" strokeweight="1" />\n';}

  this.vml_data += '<v:polyline points="0,'+(0+over)+' 0,'+(1000+over)+' '+length+','+(1000+over)+'" filled="false" strokecolor="#000000" strokeweight="1" />\n';
  this.vml_data += '</v:group>\n';

  return '<v:group style="width:'+width+';height:'+height+';">'+this.vml_data+'</v:group>';}

 //集計出力
 this.add = function (width,height,font,list)
 {//非対応ブラウザメッセージ
  if(!document.all  && navigator.userAgent.indexOf("Opera") != -1)
  {return 'InternetExplorer5.0以上ならグラフが表示されます。';}
  this.vml_list = '<table border="0" cellspacing="1" cellpadding="0" style="display:inline;">';
  for(i=0;i<this.data.length;i++)
  {this.vml_list += '<tr>\n<td>';
   this.vml_list += '<v:rect style="width:'+width+'; height:'+height+';margin-right:3px;" strokecolor="'+this.color[i]+'"';
   this.vml_list += ' fillcolor="'+this.color[i]+'" strokeweight="1" /></td>\n';
   this.vml_list += '<td style="font-size:'+font+';">'+list[i]+'</td>\n';
   this.vml_list += '</tr>';}
  this.vml_list += '</table>';
  return this.vml_list;}}

// -->
</script>

	[ 2005.7.10 ] ver.1.0
		本音を言えばもう少し作り込みたかったんだけどあんまり作り込むと汎用性が欠けてきちゃうからクラスライブラリってことで出来るだけシンプルにしてみた。今までIEでしか使えないってことで VMLってどうも敬遠してた部分あるんだけど使ってみると結構面白いねぇ。他のブラウザでも使えるようにしたいもんだけど SVGは現状プラグイン対応だから HTMLに書いたJavaScriptからのアクセスって難しいのかな？参考資料があまりに少ないんでちょっと苦戦してるところ。勉強したいところなんだけど仕事と他の勉強でいっぱいいっぱいなもんで。

ウェブ木箱
copyright(C) 2005 あう