$('#graph').animate({'width':0});//0は単位をつけなくていい
1. 0は単位をつけなくていい
2. 単位をつけないからシングルで囲わなくていい
アニメが終わったときの操作をしたかったら3番目のプロパティの指定をしたらいい
phpとかがつかえると、はいかいいえの選択をさせて、
それを集計して、
その結果をサーバから受け取ってこういうグラフで表現する、
ということができるらしい。
⑥100％分を事前に白で塗っておいて、
中身だけアニメーションさせる
その前に、初期値を50：50にして、赤青で塗り分け
説明文も入れる。
#graph{
width: 400px;
height: 50px;
background: #00c;
border:solid 1px #ccc;
}
#bar{
width: 200px;
height: 50px;
background: #c00;
}
⑦reset button
$('#rst').on('click',function(){
$('#bar').animate({'width':'200px'});//初期状態に戻す
});
⑧気を持たせるためにanimateメソッドをチェーンで３回繰り返してバーが動きまくってから本当の値を表示（気を持たせる）という演出も可能
--->test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graph</title>
<link rel ="stylesheet" href="test2.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<p>
<button id="btn">結果表示</button>
<button id="rst">リセット</button>
</p>
<p><span class="red">EU離脱</span>か<span class="blue">残留</class>か？</p>
<div id="graph">
<div id="bar"><!--伸び縮みする棒グラフ-->
</div>
</div>
<script src="test2.js"></script>
</body>
</html>
--->test2.css
body{
background:#eff;
background-image:url('../img/fish_kue2.png');
background-repeat: no-repeat;
background-position: right;
}
.red{
color:#c00;
}
.blue{
color:#00c;
}
#graph{
width: 400px;
height: 50px;
background: #00c;
border:solid 1px #ccc;
}
#bar{
width: 200px;
height: 50px;
background: #c00;
}
--->test2.js
$(function(){
console.log('hoge');
$('#btn').on('click',function(){
//投票結果をランダムに表示
//まずmax100%でデータを受け取ったとする
var result = Math.floor(Math.random()*100);
//barの長さの最大値は400 つまり100の4倍
//もちろん先生版は初めからマスランダムに*400しているよ
result *= 4;
$('#bar').animate({'width':'400px'}).animate({'width':'0px'}).animate({'width':result});
});//演出
$('#rst').on('click',function(){
$('#bar').animate({'width':'200px'});//初期状態に戻す
});
});
縦棒グラフを表示しますよ
世界の年間平均気温のデータのイメージ
本来はどっかからデータをとってくる（自動で）というのが形だけど、
今回は適当な値で
①外から読み込んだていで気温を配列で
var d = {12.5,13.6,11,2,13.2,13.8,14,1};
②縦棒グラフは横のようにいかない。普通ブロック要素(div)は縦に並ぶ。それを横に並べるにはflexを使う。
#graph{
display:flex;
}
③class barを配列の数だけ出力
･attrを使う
･それを親要素にappend
･それをループで。ループの回数は配列の数だけ
→？？？
