トップページ ＞ 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 使用
更新履歴
---
 
リファレンス

 
ソース
 

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

//折れ線グラフクラス
function l_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=1;i<arguments.length;i++)
 {this.data[this.data.length] = arguments[i];}

 //データ集計
 //グラフ横幅
 var length = 0;
 for(i=1;i<arguments.length;i++)
 {length = (length > arguments[i].length)? length : arguments[i].length;}
 length = length*200+100;

 //縦過剰座標分
 var over = 0;
 for(i=0;i<this.data.length;i++)
 {//グラフ座標
  for(ii=0;ii<this.data[i].length;ii++)
  {this.data[i][ii] = Math.round(this.data[i][ii]/max*1000);
   if(over < this.data[i][ii])
   {over = this.data[i][ii];}}}
 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:polyline points="';
   for(ii=0;ii<this.data[i].length;ii++)
   {this.vml_data += (ii*200)+','+(1000-this.data[i][ii])+" ";}
   this.vml_data += '" filled="false" 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

円、棒、折れ線とこれでとりあえず一般的なグラフは揃ったわけだけど 今現在クラスライブラリのみでの公開だから ある程度知識のある人じゃないと使えないんだよね。 今後はサンプル集の方で初心者にも使えるようにしたものをね、 公開したいなとは思ってるんだけどね。


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