つづき
③class barを配列の数だけ出力
attrを使う
それを親要素にappend
それをループで。ループの回数は配列の数だけ
1.新しいものをつくる とりあえずvar ele
2.divを作りたい
→
var ele=$('<div>').attr('class','bar');
3.親要素にアペンドする
親要素は#graph、appendするのは今作ったele
--->test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graph</title>
<link rel ="stylesheet" href="test3.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<p>
<button id="btn">グラフ表示</button>
<button id="rst">リセット</button>
</p>
<div id="graph">
</div>
<script src="test3.js"></script>
</body>
</html>
--->test3.js
$(function(){
console.log('hoge');
//外から読み込むべき転換気温のデータ
var tem = [12.5,13.6,11.2,13.2,13.8,14,1];//jsの配列は[]
for (var i=0; i<tem.length; i++){
var ele=$('<div>').attr('class','bar');
$('#graph').append(ele);
}
});
--->test3.css
#graph{
display:flex;
}
.bar{
width: 30px;
background:#c00;
height: 150px;/*とりあえずそういう値ということで*/
margin:0.5px;/*くっつくので離す*/
}
④最初の値を0にしてアニメする
→うまくいきませんね？
ele.animate({'height':tem[i]+'px'});
これを
$('ele').animate({'height':tem[i]+'px'});
と書いてしまっていた
eleは要素でなくて変数。
まだそれが分かってない
これからeleのことはelehogeとでも書きなさい
elementである変数のhogeだ
押すたびにのれんのようにグラフが増えて面白い。
⑤しかしグラフが表示がおかしい
divが左上を起点にどんどん並べるからだ。(display:flexがかかっているので)
→ポジションアブソリュート（直近の親要素にはリラティブ）を使う
⑥設計を変えていきましょう
グラフの幅や高さをはじめから与えておく必要がある
#graph{
display:flex;
width:800px;
height:500px;
background:#fff;
position:relative;/*これを置いておくとこれが子要素の基準となる。これ自体に意味はない*/
}
.bar{
width: 30px;
background:#c00;
height: 0px;
/*margin:0.5px;*/
position:absolute;/*どういう位置に配置したいかこれでできるようになる*/
bottom:0;//親要素の一番下側にくっつけて配置
}
widthは幅
wはぼよーんと右に伸ばしたら伸びそうでしょう
幅なのです
これを実行すると、全部の棒が全部重なって表示される
⑦leftプロパティを指定してずらしていく
test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Graph</title>
<link rel ="stylesheet" href="test3.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<p>
<button id="btn">グラフ表示</button>
<button id="rst">リセット</button>
</p>
<div id="graph">
</div>
<script src="test3.js"></script>
</body>
</html>
--->test3.css
body{
background:#ffc;
background-image:url('../img/fish_kue2.png');
background-repeat: no-repeat;
background-position: right;
}
#graph{
display:flex;
width:500px;
height:300px;
background:#fff;
position:relative;/*これを置いておくとこれが子要素の基準となる。これ自体に意味はない*/
}
.bar{
width: 30px;
background:#c00;
height: 0px;
/*margin:0.5px;*/
position:absolute;/*どういう位置に配置したいかこれでできるようになる*/
bottom:0;//親要素の一番下側にくっつけて配置
}
--->test3.js
$(function(){
console.log('hoge');
//外から読み込むべき転換気温のデータ
var tem = [12.5,13.6,11.2,13.2,13.8,14.1];//jsの配列は[]
var Rate = 10;//1.定数なので大文字始まり 2.グラフ表現のための値
$('#btn').on('click',function(){
//まず要素を生成
for (var i=0; i<tem.length; i++){
var ele=$('<div>').attr('class','bar').css('left',(35*i)+'px');//forが回るたび横に棒をずらして描画
$('#graph').append(ele);
//animate
ele.animate({'height':tem[i]*Rate+'px'});
}
});
});
これを拡張すると、
配列の数によって自動で棒の幅が変わるとか、
補助線も自動で出るとか
おそらく配列のmax値にあわせて全体の縮尺をきめるとか
いろいろできる
canvasという要素を使うと描画をすることが出来る
html5から採用された
ただしcanvasはjQueryが使えないので、全部ネイティブで書く必要があるらしい。
セットインターバルをつかってアニメーションも作れるらしい
いまは逆にあんまり実際使う人はいないらしい
お習字ソフトとか
ペイント風なソフトとか
そういうのをcanvasを使って作ったというのもあったらしい
円グラフだとこのcanvasが必要になってくるらしい
使わないなら棒グラフが限界らしい
本当ならこういうグラフはジェイソンでデータをひっぱってきてそれで描画したい。営業所の売り上げとかさ。
それはデータベースを扱った後で、自分でapiをつくって受け取るというのをいずれいずれやりましょう。
今週
jsの今年の最後
土曜日
演習の課題
その日のうちに指示をしてその日のうちに提出
表現をjQueryで。
基本ボタンをおしてなんかするもの
