3Dグラフを作成するjavascript「Canvas 3D Graph」

グラフは普通X、Yの2軸で形成される。
これにZを加えたら・・・。
役に立つのか分からないが、AXXTでは、3Dグラフが作成できるCanvas 3D Graphを公開している。
3Dgraph

使用方法
Canvas 3D Graphからcanvas3DGraph.jsをダウンロードする。
またcanvasに対応していないIE用にexcanvas.jsが必要になる。
これらとCSSをhead内に挿入。
<!--[if IE]><script type="text/javascript" src="http://yourdomain/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="http://yourdomain/canvas3DGraph.js"></script>
<style type="text/css">
#g-holder {
height:620px;
position:relative;
}
#canvasDiv{
border:solid 1px #e1e1e1;
width:600px;
height:600px;
position:absolute;
top:0px; left:0px;
z-index:10;
}
#x-label{
position:absolute;
z-index:2;
top:340px;
left:580px;
}
#y-label{
position:absolute;
z-index:2;
top:10px;
left:220px;
}
#z-label{
position:absolute;
z-index:2;
top:540px;
left:10px;
}
#gInfo div.gText{
position:absolute;
z-index:-1;
font:normal 10px Arial;
}
</style>


次にHTMLを以下のように書き込む。
<div id="g-holder">
<div id="canvasDiv">
<canvas id="graph" width="600" height="600"></canvas>
<div id="gInfo"></div>
</div>
</div>


さらにグラフデータ用のscriptを書き込むと完成です。
<script type="text/javascript">
window.onload=function(){
var g = new canvasGraph('graph');
gData=new Array();
gData[0]={x:X軸値,y:Y軸値,z:Z軸値};
gData[1]={x:X軸値,y:Y軸値,z:Z軸値};
 //以下表示する項目分
gData.sort(sortNumByZ);
g.drawGraph(gData);
}
</script>

3Dグラフを作成するjavascript「Canvas 3D Graph」サンプル

sponsors

「3Dグラフを作成するjavascript「Canvas 3D Graph」」をシェアする

記事作成:
記事URL:

TOP > > > 3Dグラフを作成するjavascript「Canvas 3D Graph」