イントロダクション
記事「HTMLとJavaScriptで単純な横向き棒グラフを作成する」では、Webページ上に単純な横向きの棒グラフを JavaScript を使って作成する方法を紹介しました。今回は、その時のコードを修正して、横向きの棒グラフがアニメーションするようにしてみます。
今回のアニメーションは、横向きの棒グラフの棒の長さを一定の長さで増やしていく動きをさせます。
コード
以下のコードをグラフを表示させたい<body>内の任意の位置に貼り付けてください。（なお、<script type="text/javascript"></script>の部分は<head>内に設置することもできます。）
<form>
<input type="button" value="アニメーション実行" onclick="startAnimation()" />
</form>
<div id="graph-object"></div>
<script type="text/javascript">
<!--
// 系列名と値
function CGraphValue(name, value) {
this.name = name; // 系列名
this.value = value; // 値
}
// グラフのデータ
var graphValues = [];
graphValues.push(new CGraphValue("系列1", 100));
graphValues.push(new CGraphValue("系列2", 200));
graphValues.push(new CGraphValue("系列3", 215));
graphValues.push(new CGraphValue("系列4", 105));
graphValues.push(new CGraphValue("系列5", 118));
// グラフの生成パラメータ
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; // 棒グラフの単位値(1)に対応する長さ (ピクセル）
// グラフの値が 1 の場合の、グラフの長さです。
// グラフの値 * 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; // 1フレームあたり、グラフに加算する値
}
/*
アニメーションするグラフを作成する
id_graph : グラフを設定する要素の id
graphValues : グラフの系列データの配列 (CGraphValueのArray）
valuesName : データの名前 (CGraphValue）
graphGenParam : グラフの生成パラメータ (CGraphGenerateParam)
graphAnimationParam : グラフのアニメーション用パラメータ
*/
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();
}
/*
グラフを作成する
id_graph : グラフを設定する要素の id
graphValues : グラフの系列データの配列 (CGraphValueのArray）
valuesName : データの名前 (CGraphValue）
graphGenParam : グラフの生成パラメータ (CGraphGenerateParam)
*/
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 + "</td></tr></table></td></tr>";
}
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 = 300; // グラフの最大の長さ
var pixel_per_value = max_width / max_value; // グラフの単位値あたりの長さ
// アニメーショングラフの作成
createAnimationGraph(
"graph-object",
graphValues,
new CGraphValue("系列名", "値"),
new CGraphGenerateParam(pixel_per_value, "solid", "1px", "#999999", "#cccccc", "14px"),
new CGraphAnimationParam(1000/60, 1)
);
}
//-->
</script>
以下の部分が棒グラフのデータです。
// グラフのデータ
var graphValues = [];
graphValues.push(new CGraphValue("系列1", 100));
graphValues.push(new CGraphValue("系列2", 200));
graphValues.push(new CGraphValue("系列3", 215));
graphValues.push(new CGraphValue("系列4", 105));
graphValues.push(new CGraphValue("系列5", 118));
任意の値を設定してください。
以下の部分で、アニメーションするグラフの生成処理を呼び出しています。
// アニメーショングラフの作成
createAnimationGraph(
"graph-object",
graphValues,
new CGraphValue("系列名", "値"),
new CGraphGenerateParam(pixel_per_value, "solid", "1px", "#999999", "#cccccc", "14px"),
new CGraphAnimationParam(1000/60, 1)
);
第１引数はグラフを挿入する要素の id です。
各自の環境に応じて、適切な id を設定してください。
（ここでは、<div id="graph-object"></div> 内に棒グラフが挿入されます。）
第２引数はグラフのデータです。
第３引数はグラフの各値のタイトルです。
任意の値を設定してください。
第４引数はグラフの書式設定です。
任意の値を設定してください。
第５引数はアニメーションの設定です。
任意の値を設定してください。
結果
以下のように、アニメーションする横向きの棒グラフが作成できます。「アニメーション実行」ボタンをクリックすると、アニメーションを開始できます。
なお、今回はアニメーションの実行開始のトリガーをボタンクリック時としましたが、ページ読み込み完了時や要素が画面内に表示されたときなど、いろいろなトリガーが考えられます。
最適なトリガーを検討してみてください。
コメントを投稿
コメント投稿機能について