使用している画像:
MIDORI.GIF
KURO.GIF
簡易棒グラフのサンプルです。フォームに数字を入れてグラフボタンを押してみてください。x,yを書き換えて表の大きさを変えたりImgWを小さくして目盛の刻みを細かくしたりも出来ます。
実際に使う時はたとえば、CGIから.js外部ファイル形式で書き出された配列データなどを読み込んで、条件等をボタンで切り替えたりしながらサブウインドウへグラフ表示するなどの方法で処理すのもスマートかもしれません。アクセスグラフなら毎日のlogdataをそういう形で.js外部ファイルへ書き出しておいて、ボタンクリックで何月何日のグラフを表示させる、といった使い方も考えられますね。
フォームに数字を入れてグラフ描画をクリックしてみてください。
<html>
<head>
<title></title>
<script language="JavaScript1.1">
<!--
//項目名
var koumoku=new Array();
koumoku[0]="Performa588";
koumoku[1]="LC3";
koumoku[2]="FMV-5133DPS";
koumoku[3]="FM8";
koumoku[4]="PC9821-V166";
var x = 20 ;//x軸(目盛の数)
var y = 5 ;//y軸(項目数)
var gx = new Array() ;
var gy = new Array() ;
var ImgW ="20" ;//描画する画像1枚の幅(目盛の刻み幅を拡大縮小)
var ImgH ="20" ;//描画する画像1枚の高さ
function gfWrite()
{
//イメージの事前読み込み
if(document.images)
{
Graphimg = new Array();
Graphimg[0] = new Image();
Graphimg[0].src = "KURO.GIF";
Graphimg[1] = new Image();
Graphimg[1].src = "MIDORI.GIF";
}
//グラフ表組み構築
document.write("<form>")
for( gi=0 ; gi < y ; gi++ )
{
document.write("<nobr>")
document.write(""+gi.toString()+" : ")
document.write(koumoku[gi])
document.write("<br>")
document.write("<input type='text' size='5'>")
for(gj=0;gj<x;gj++)
{
var no = gj+gi*x
document.write("<img src='MIDORI.GIF' name='Name"+no+"' ")
document.write(" width="+ImgW+" height="+ImgH+"")
document.write(" vspace='0'>")
}
document.write("</nobr>")
document.write("<br>")
}
document.write("</form>")
document.write("</tr>")
document.write("<form>")
document.write("<input type='button' value='クリア' onClick='setup(1)'>")
document.write("<input type='button' value='グラフ描画' onClick='fiscn();gr()'>")
document.write("</form>")
document.write("<br>")
}
var fdata=new Array()
//データ読み込み
function fiscn(){
for(fi=0;fi<y;fi++){
fdata[fi] = document.forms[0].elements[fi].value
if(fdata[fi]>x) fdata[fi] = x
}
}
//グラフの書きだし
function gr()
{
if(document.images)
{
for(gi=0;gi<y;gi++)
{
for(gj=0;gj<fdata[gi];gj++)
{
var writeno = gj+gi*x
document.images['Name'+writeno].src=Graphimg[0].src
}
}
}
}
//指定したimgNoの画像で画面を塗りつぶす
function setup(imgNo)
{
if(document.images)
{
for(cl=0;cl<x*y;cl++)
{
document.images['Name'+cl].src=Graphimg[imgNo].src
}
}
}
//-->
</script>
</head>
</body>
<script language="JavaScript1.1">
<!--
gfWrite()
<!---->
</script>
</body>
</html>
使用している画像:
| CONTENTS
| PART1 これだけ知っていれば大丈夫
| PART2 サンプルの紹介
| PART3 JavaScript言語仕様
| PART4 JavaScriptクイック書式一覧
| PART5 JavaScriptサイト
| オンラインサポートページ(回線をつないでください)