勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

imgタグで作成したグラフをjQueryでリアルタイムに動かす

      2014/07/03

このグラフをリアルタイムプレビューさせる。

■サンプル
http://sample.taitan916.info/graph/

■ソース
<?php
$max_a = 0;
for ($i=0; $i<5; $i++) {
$graph_val[$i] = rand(1,50);
$max_a += $graph_val[$i];
}
$max_b = max($graph_val);
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
.graph {
min-width:300px; min-height:300px; border:solid 1px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
$("[name='graph_value']").bind('keyup change', function(){ //項目をいじった際にイベント
var i = 0;
var max_a = 0;
var graph_array = new Array();
$("[name='graph_value
']").each(function() {
graph_array[i] = $("[name='graph_value']").eq(i).val();
max_a += Number(graph_array[i]); //項目の合計値
i++;
});
var max_b = Math.max.apply(null, graph_array); //項目の最大値
for(i=0; i<graph_array.length; i++){
$(".class_title1_"+i).text(graph_array[i]);
$(".class_change1_"+i).css('width',(Math.floor(graph_array[i] / max_a * 100))+'%');
$(".class_title2_"+i).text(graph_array[i]);
$(".class_change2_"+i).css('width',(Math.floor(graph_array[i] / max_b * 100))+'%');
}
});
})
</script>
<title>graph</title>
</head>
<body>
<h1>graph</h1>
<table>
<tr>
<td>
<?php
for ($i=0; $i<5; $i++) {
echo "項目" . ($i+1) . ":
<input type='text' name='graph_value
' style='width:30px' value='{$graph_val[$i]}'><br>";
}
?>
</td>
</tr>
<tr>
<td class="graph">
■本当の割合を出したもの<br>
<?php
for ($i=0; $i<5; $i++) {
echo "項目" . ($i+1) . ":<span class='class_title1_{$i}'>{$graph_val[$i]}</span><br>
<img src='./image/graph.jpg' style='height:10px; width:" . (floor($graph_val[$i] / $max_a * 100)) . "%;' class='class_change1_{$i}'><br>";
}
?>
</td>
<td class="graph">
■最大の結果を100%にして出したもの<br>
<?php
for ($i=0; $i<5; $i++) {
echo "項目" . ($i+1) . ":<span class='class_title2_{$i}'>{$graph_val[$i]}</span><br>
<img src='./image/graph.jpg' style='height:10px; width:" . (floor($graph_val[$i] / $max_b * 100)) . "%;' class='class_change2_{$i}'><br>";
}
?>
</td>
</tr>
</table>
</body>
</html>

■その他
Math.max.apply(null, graph_array)
PHPのmax関数みたいに配列の最大値を取得できる。

Number(graph_array[i])
整数値に変換。

 - jQuery, PHP

  関連記事

PHPでフォームとかの数値チェック

フォームとかで届いた値が整数値で0以上かどうか 調べる際に、なるほど、と思ったソ ...

FLASHがインストールされているかどうかチェックする

以前にここでちょっとやったけど、インストールされているか どうかだけならもっと良 ...

独自タグからタグへの変換function

独自タグは##IMG1##みたいな感じ。 画像ファイル名は「ファイルパス/seq ...

PHPのclassを用いてBBS作成

オブジェクト指向勉強中のメモ。 ■index.php <? error_r ...

ゼロ詰め(ゼロパディング)の逆はゼロサプレス

ゼロパディングしている日付のゼロの部分を排除したかった。ただ、どうやって調べたら ...

Basic認証がかかっているファイルをPHPで認証突破と取得

Aというサイトにあるベーシック認証がかかっているディレクトリ内のファイルを、Bと ...

PHPでサイトマップを動的に生成する

WordPress等のCMSは使っておらず、自動更新するサイトがあり、そのサイト ...

PHPで画像を上下反転させ保存する

やりたかった事は、下記の通り。 ・既にフォルダに保存されている画像を上下反転させ ...

Ajaxの負荷対策

Ajaxを使ってボタンを押した際に表示を切り替える処理。 都度Ajaxを使ってた ...

ディレクトリに設置してあるフォルダをPHPで調べて表示

やりたい事はsampleというディレクトリがあったとして、その直下にあるフォルダ ...