javascriptのアニメーションに関する質問です。

当方、javascript初心者です。

行いたい事は以下の通りです。
(1) blogの記事(本文内)においてページの表示と同時に動作するグラフ(1目盛づつ増えるアニメーション)の表示。

一定間隔で再表示。※各記事に１つずつ異なった値のグラフを表示。
(2) 上記のスクリプトの外部ファイル化と本文内に読み込む方法及び本文内でのグラフのパラメータの設定。

現状(検索して調べたサイトのサンプルを使用)

function CGraphValue(name, value) {
this.name = name;
this.value = value;
}

var graphValues = [];
graphValues.push(new CGraphValue("項目A", 5));
graphValues.push(new CGraphValue("項目B", 3));
graphValues.push(new CGraphValue("項目C", 4));
graphValues.push(new CGraphValue("項目D", 2));
graphValues.push(new CGraphValue("項目E", 1));

  function CGraphGenerateParam(pixel_per_value, graph_border_style, graph_border_width, graph_border_color, graph_background_color,

graph_height) {
this.pixel_per_value = pixel_per_value;

this.graph_border_style = graph_border_style;

this.graph_border_width = graph_border_width;

this.graph_border_color = graph_border_color;

this.graph_background_color = graph_background_color;

this.graph_height = graph_height;

}

function CGraphAnimationParam(interval, add_value) {
this.interval = interval;
this.add_value = add_value;
}

function createAnimationGraph(id_graph, graphValues, valuesName, graphGenParam, graphAnimationParam) {

       var temp_graphValues = [];
for ( var i = 0; i < graphValues.length; i++ ) {
    temp_graphValues.push(new CGraphValue(graphValues[i].name, 0));
}

        function runAnimation() {
    createGraph(id_graph, temp_graphValues, valuesName, graphGenParam);

                var updateFlag = false;             
    for ( var i = 0; i < graphValues.length; i++ ) {
        if ( graphValues[i].value > temp_graphValues[i].value ) {
            temp_graphValues[i].value += graphAnimationParam.add_value;
            if (temp_graphValues[i].value > graphValues[i].value) {             
                temp_graphValues[i].value = graphValues[i].value;
            }

            updateFlag = true;
        }
    }

                if ( updateFlag ) {
        setTimeout(runAnimation, graphAnimationParam.interval);
    }
}
runAnimation();

}

function createGraph(id_graph, graphValues, valuesName, graphGenParam) {

       var obj_graph = document.getElementById(id_graph);
var graph_html = "<table>";
graph_html += "<tr><td>" + valuesName.name + "</td><td>" + valuesName.value + "</td></tr>";


for (var i = 0; i < graphValues.length; i++) {

    var width = graphGenParam.pixel_per_value * graphValues[i].value;

    var graph_div = "";
    if (graphValues[i].value > 0) {
        graph_div = "<div style=\"border-style:" + graphGenParam.graph_border_style +
            ";border-width:" + graphGenParam.graph_border_width +
            ";border-color:" + graphGenParam.graph_border_color +
            ";background-color:" + graphGenParam.graph_background_color +
            ";width:" + width +
            "px;height:" + graphGenParam.graph_height + ";\"></div>";
    }

    graph_html += "<tr><td>" + graphValues[i].name + "</td><td><table><tr><td>" + graph_div + "</td><td>" + graphValues[i].value +

"";
}

graph_html += "</table>";
obj_graph.innerHTML = graph_html;

}

function startAnimation() {

        var max_value = 0;
for (var i = 0; i < graphValues.length; i++) {
    if (graphValues[i].value > max_value) {
        max_value = graphValues[i].value;
    }
}

        var max_width = 50;                           
var pixel_per_value = 50;    


        createAnimationGraph(
    "graph-object", 
    graphValues, 
    new CGraphValue("Personal", "Result"),
    new CGraphGenerateParam(pixel_per_value, "solid", "0px", "#999999", "#fce525", "20px"), 
    new CGraphAnimationParam(1000/1, 1)    
);

setTimeout("startAnimation()",20000);
}

・外部ファイル化していないため、各記事の本文内にjavascriptを記入。
・グラフの表示はできるが1つの記事のみ。(最後の記事のみ)

できるだけ簡単な表現でお教え頂ければ幸いです。
宜しくお願い致します。

イメージはこんな感じです。
http://simpletestsblog.blogspot.jp/

※画像にあるスクリプトをそのまま記事の本文に書き込んだものです。
test0及びtest1に全く同じ内容を書き込んであります。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryを使うと簡単にできます。

lang
1<!doctype html>
2<html>
3<head>
4	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
5	<style>
6	.progress {
7		position:relative;
8		display:block;
9		margin-bottom:10px;
10		width:60%;
11		background:#ccc;
12		height:30px;
13		border-radius:10px;
14	}
15
16	.progress-bar {
17		height:30px;
18		width:0px;
19		background: gold;
20		border-radius:5px;
21	}
22
23	.progress-bar span{
24		position:absolute;
25		right:10px;
26		top:0;
27		line-height:30px;
28	}
29	</style>
30	<script>
31	$(function(){
32		$('.progress').each(function(){
33			$(this).find('.progress-bar').animate({width:$(this).data('percent')}, 1000);
34		});
35	});
36	</script>
37</head>
38<body>
39	<div class="progress" data-percent="50%">
40		<div class="progress-bar"><span>5</span></div>
41	</div>
42
43	<div class="progress" data-percent="70%">
44		<div class="progress-bar"><span>7</span></div>
45	</div>
46
47</body>
48</html>

繰り返す場合は

lang
1	<script>
2	$(function(){
3		reapeatProgressBar();
4	});
5
6	var reapeatProgressBar = function() {
7		$('.progress-bar').css('width',0);
8		$('.progress').each(function(){
9			$(this).find('.progress-bar').animate({width:$(this).data('percent')}, 1000);
10		});
11		setTimeout('reapeatProgressBar()',3000);
12	}
13	</script>