徐々に動くグラフ
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
div {					/* div タグを簡易グラフ化するためのスタイル（最低限必要） */
	border: 1px solid #77aaff;	/* グラフの太さ、線の種類、枠の色 */
	background-color: #ccccff;	/* グラフの色 */
	text-align: center;		/* パーセンテージ表示の位置 */
	font: italic 0.8em Verdana;	/* フォント指定（任意） */
}
-->
</style>
<script type="text/javascript">
<!--
var ele, max, count = 0;
var widthList = new Array();
function getGraph() {
	if (!document.getElementsByTagName) return;

	ele = document.getElementsByTagName("div");
	if (!ele) return;

	var tmp = new Array();
	for (var i = 0; i < ele.length; i++) {
		tmp[i] = widthList[i] = ele.item(i).style.width.replace("%", "");
	}
	max = tmp.sort(function(a, b) { return(b - a); })[0];

	(widthList) && graph();
}
function graph() {
	for (var i = 0; i < widthList.length; i++) {
		ele.item(i).style.width = count + "%";
		ele.item(i).innerHTML = count + "%";	// % のリアルタイム表示用

		if (count >= widthList[i]) {
			if (widthList[i].indexOf(".") == -1 && widthList[i] != 0) {
				widthList[i] += ".0";
			}
			ele.item(i).innerHTML = ele.item(i).style.width = widthList[i] + "%";
		}
	}

	if (count < max) setTimeout("graph();", 50);	// グラフを表示する速さ
	count += 2;					// グラフの増加量 (%)
}
// -->
</script>
</head>
<body onload="getGraph();">
<table width="500">
<tr>
<td><div style="width: 100%;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 60%;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 25.5%;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 50%;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 77.7%;">&nbsp;</div></td>
</tr>
</table>
</body>
</html>
グラフ表示[%]

ページが全て読み込まれたら関数 getGraph を呼び出します。

最初に配列を定義して、div タグの個数分の配列を擬似的に作成します。それぞれの div タグの横幅 (width) を ele.item(i).style.width で取得します。この値には「%」が含まれているため、それを replace で取り除いた値（実際は空白に置き換え）を変数 widthList に格納します。

このとき、変数 tmp にも変数 widthList の配列がそのまま代入されます。これはグラフの最大値を取得するために変数 tmp に入っている配列（それぞれの width の値）を大きい順に並べ替えて1つ目の値を取り出して変数 max に代入します。

これでそれぞれの div タグの元の値が取得できましたので、関数 graph を呼び出します。この関数 graph は、関数 getGraph の最後に呼ばれたあと setTimeout() によってそれぞれの width の値まで繰り返し呼ばれます。

if (count >= widthList[i]) で現在動いている width の値（変数 count）と元の width の値（それぞれの width の値）を比較して、現在動いている width の値が元の width の値に達したら、デフォルトの値を表示させます。

この動作を setTimeout() によって変数 count が変数 max の値（このグラフの最大値）に達するまで実行されます。変数 count の値は関数 graph が呼ばれた時に増える width の値です。変数 count に複合代入される数値を 2 とすれば 2% ずつ増えて 10 とすれば 10% ずつ増えます。

setTimeout() によって繰り返される時間はグラフが表示される速さになりますので、変数 count が増える時間を指定してください。通常は 10 ms 〜 50 ms 程度が良いと思います。

表示するグラフが多い場合にリアルタイムに「%」を表示すると動作が重くなりますので、不要の場合は「% のリアルタイム表示用」の行を削除してください。

他のタグ (<hr> 等) にも使うことができます。その場合は、document.getElementsByTagName("div") の div の部分を変更したいタグ名に変更してください。ただし、innerHTML によって文字を挿入したり書き換えすることができないタグがありますので、その場合には innerHTML の記述がある行は全て削除してください。

ページ内にこのグラフ用に記述した div タグ以外があると動作しませんので、もしページ内に他の div タグがある場合は id 指定の方法を用いて見てください。

徐々に動くグラフ
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
div {
	border: 1px solid #77aaff;
	background-color: #ccccff;
	text-align: center;
	font: italic 0.8em Verdana;
}
-->
</style>
<script type="text/javascript">
<!--
var ele, max, count = 0;
var widthList = new Array();
function getGraph() {
	if (!document.getElementsByTagName) return;

	ele = document.getElementsByTagName("div");
	if (!ele) return;

	var tmp = new Array();
	for (var i = 0; i < ele.length; i++) {
		tmp[i] = widthList[i] = ele.item(i).style.width.replace("px", "");
	}
	max = tmp.sort(function(a, b) { return(b - a); })[0];

	(widthList) && graph();
}
function graph() {
	for (var i = 0; i < widthList.length; i++) {
		var now = (count >= widthList[i]) ? widthList[i] : count;
		ele.item(i).innerHTML = ele.item(i).style.width = now + "px";
	}

	if (count < max) setTimeout("graph();", 20);	// グラフを表示する速さ
	count += 2;					// グラフの増加量 (px)
}
// -->
</script>
</head>
<body onload="getGraph();">
<table>
<tr>
<td><div style="width: 200px;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 230px;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 60px;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 100px;">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 30px;">&nbsp;</div></td>
</tr>
</table>
</body>
</html>
グラフ表示[px]

width の大きさの指定方法が「px」のときはスクリプト内の「%」を「px」に変えるだけです。

徐々に動くグラフ
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<style type="text/css">
<!--
.graph {
	border: 1px solid #77aaff;
	background-color: #ccccff;
	text-align: center;
	font: italic 0.8em Verdana;
}
-->
</style>
<script type="text/javascript">
<!--
var max, count = 0;
var widthList = new Array();
function getGraph() {
	if (!document.getElementById) return;

	var tmp = new Array();
	for (var i = 0; i < 5; i++) {		// id の個数を指定
		var ele = document.getElementById("g" + i);
		tmp[i] = widthList[i] = ele.style.width.replace("%", "");
	}
	max = tmp.sort(function(a, b) { return(b - a); })[0];

	(widthList) && graph();
}
function graph() {
	for (var i = 0; i < widthList.length; i++) {
		var ele = document.getElementById("g" + i);
		ele.style.width = count + "%";

		if (count >= widthList[i]) {
			if (widthList[i].indexOf(".") == -1 && widthList[i] != 0) {
				widthList[i] += ".0";
			}
			ele.innerHTML = ele.style.width = widthList[i] + "%";
		}
	}

	if (count < max) setTimeout("graph();", 50);	// グラフを表示する速さ
	count += 2;					// グラフの増加量 (%)
}
// -->
</script>
</head>
<body onload="getGraph();">
<table width="500">
<tr>
<td><div style="width: 100%;" class="graph" id="g0">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 60%;" class="graph" id="g1">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 25.5%;" class="graph" id="g2">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 50%;" class="graph" id="g3">&nbsp;</div></td>
</tr>
<tr>
<td><div style="width: 77.7%;" class="graph" id="g4">&nbsp;</div></td>
</tr>
</table>
</body>
</html>
グラフ表示

div タグ用と同じですが、タグ名を指定するのではなく id 指定します。この id 名は g0 〜 g4 のように g と数字を id 名として指定してください。そして、一番初めの for 文 のループ終了条件に id の個数を入れてください。

[PR] Yahoo!ショッピング