ウェブ木箱：VML円グラフ



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

VML円グラフ
ver.1.1

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


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

公開日

2005.3.15

最終更新日

2005.7.10

バージョン

ver 1.1

動作確認

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

取扱難易度

★★★☆☆

cookie

不使用

CSS

使用

更新履歴

2005.7.10

ver1.1

VMLのパスを1データにつき1つに統合

使い方

メソッド・プロパティ

注意・制限事項

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

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

    data = new Array(80,60,310);
    obj  = new c_graph(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>

メソッド・プロパティ

注意・制限事項

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

■インスタンス

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

■メソッド一覧

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

■プロパティ一覧

color[i]	グラフの棒の色。配列で指定します。 [形式]RGB値、または色名
shadow	円グラフの影の色。offなら非表示になります。 [形式]RGB値、またはoff
s_left	円グラフの影の位置。(横方向) [形式]整数
s_top	円グラフの影の位置。(縦方向) [形式]整数
sorting	円グラフのデータ及び項目を多い順の並び替え設定 [形式]有効：on，無効：off
ritu	割合(00%の部分)の表示設定。 [形式]有効：on，無効：off

メソッド・プロパティ

注意・制限事項

現在は特にありません。

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

//円グラフクラス
function c_graph()
{
 this.color    = new Array();
 var list      = new Array();
 var data      = new Array();
 var count     = new Array();
 var zindex    = new Array();
 this.point    = new Array();
 this.percent  = new Array();
 this.vml_data = '';
 this.vml_list = '';

 //設定
 this.shadow   = "#d0d0d0"; //影の色(offなら非表示)
 this.s_left   = 20;        //影の位置(横)
 this.s_top    = 20;        //影の位置(縦)
 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";

 this.sorting  = "on"; //並び替え(有効：on，無効：off)
 this.ritu     = "on"; //割合表示(有効：on，無効：off)
 //ここまで

 //コンストラクタ
 //引数解析
 if(!arguments[0])
 {return false;}
 for(i=0;i<arguments[0].length;i++)
 {data[data.length] = arguments[0][i];}

 //データ集計
 var total = 0;

 for(i=0;i<data.length;i++)
 {data[i]    = (data[i]+"").replace(/\D*/,"")-0;
  count[i]   = i;
  total     += data[i];}

 for(i=0;i<data.length;i++)
 {this.percent[i] = Math.floor(data[i]/total*1000)/10+"%";}

 if(this.sorting != "off")
 {count.sort(function (a,b){return data[b]-data[a];});
  data.sort(function (a,b){return b-a;});}

 list[0] = 0;

 for(i=0;i<data.length;i++)
 {list[i-0+1] = (data[i]/total)*360;
  zindex[i]   = (data[i]/total)*360*(-1);
  if(i != 0)
  {list[i-0+1] += list[i];}}

 //データ生成
 var r = 500;

 for(i=0;i<list.length;i++)
 {if(list[i] < 0 || isNaN(list[i]))
  {break;}
  var a = list[i];
  var x  = r * Math.cos(a / 180 * Math.PI);
  var y  = r * Math.sin(a / 180 * Math.PI);

  if((a >= 0 && a < 90) || a >= 360)
  {x = x+500;
   y = 500-y;}
  else if(a >= 90 && a < 180)
  {x = x+500;
   y = 500+(y*(-1));}
  else if(a >= 180 && a < 270)
  {x = 500+x;
   y = 500+(y*(-1));}
  else if(a >= 270 && a < 360)
  {x = 500+x;
   y = 500+(y*(-1));}

  x  = Math.round(x);
  y  = Math.round(y);
  this.point[i]   = x+","+y;}
 //コンストラクタここまで

 //グラフ出力
 this.drow = function (width,height)
 {//非対応ブラウザメッセージ
  if(!document.all || navigator.userAgent.indexOf("Opera") != -1)
  {return 'InternetExplorer5.0以上ならグラフが表示されます。<br>';}
  this.vml_data = "";
  //VMLデータ生成
  if(this.shadow != "off")
  {this.vml_data += '<v:arc style="width:1000px;height:1000px;position:relative;top:'+this.s_top+'px;left:'+this.s_left+'px;z-index:-500;"';
   this.vml_data += ' startangle="0" endangle="360" strokecolor="'+this.shadow+'" fillcolor="'+this.shadow+'" strokeweight="1" />';}

  for(i=0;i<this.point.length;i++)
  {if(this.point[i-0+1] == undefined)
   {break;}

   this.vml_data += '<v:group style="width:100%;height:100%;rotation:90;flip:y;z-index:'+zindex[i]*(-1)+';">\n';
   this.vml_data += '<v:shape style="width:1000px;height:1000px;"';
   this.vml_data += ' path="m 500,500 l '+this.point[i]+' ar 0,0,1000,1000,'+this.point[i]+','+this.point[i-0+1]+' l 500,500 x e';
   this.vml_data += '" strokecolor="'+this.color[i]+'" fillcolor="'+this.color[i]+'" strokeweight="1" />\n';
   this.vml_data += '</v:group>';}

   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 "";}
  this.vml_list = '<table border="0" cellspacing="1" cellpadding="0" style="display:inline;">';
  for(i=0;i<count.length;i++)
  {if(!list[count[i]])
   {list[count[i]] = "";}
   else
   {this.percent[count[i]] = "("+this.percent[count[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[count[i]]+'</td>\n';
   if(this.ritu != "off")
   {this.vml_list += '<td style="font-size:'+font+';">'+this.percent[count[i]]+'</td>\n';}
   this.vml_list += '</tr>';}
  this.vml_list += '</table>';
  return this.vml_list;}}

// -->
</script>

	[ 2005.7.10 ] ver.1.1
		今回はちょっとしたマイナーチェンジだけど、今までは三角形と弧の組み合わせでグラフを描いてたのを１つのパスに統合してみました。これにより立体的なグラフにすることも可能なんだけどそうなると今度は重なりの問題が出てくるんだよね。さすがに無料配布でそこまでやってられないんで対応希望の人はカスタマイズの依頼してね。実際現状でも十分使えると思うし。

	[ 2005.3.15 ] ver.1.0
		ウェブで使えるベクター画像っていったらVMLにSVG・・・。標準仕様という意味ではSVG使うべきなんだろうけど肝心なプラグインの普及率ってどうなんだろうね。それにVMLはIE5.0以上のみの対応とは言ってもそれでシェアの90%はカバーできるわけだしね。っと聞こえのいい言い訳をしてみたりするが SVGだとプラグインだからVMLみたいに扱えないんだよね。もしかしたらいい方法あるのかもしれないけどまだまだ勉強不足のようで(笑) そんなわけでSVG版は後日公開予定ってことでね。

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