インラインSVGを利用した棒グラフ
前回インラインSVGについてまとめてみましたが、
その利用方法がないか考えてみて、
棒グラフで活用する方法を思いついたので、
実際に作ってみました。
グラフは、枠を<line>と<text>で、
グラフの本体を<rect>で描画しました。
SVG
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | <svg width="400" height="280"> <!-- グラフ本体 --> <rect x="60" y="220" width="20" height="20" fill="#0099ff" stroke="#0022bb" id="bar1" /> <rect x="120" y="200" width="20" height="40" fill="#0099ff" stroke="#0022bb" id="bar2" /> <rect x="180" y="180" width="20" height="60" fill="#0099ff" stroke="#0022bb" id="bar3" /> <rect x="240" y="160" width="20" height="80" fill="#0099ff" stroke="#0022bb" id="bar4" /> <rect x="300" y="140" width="20" height="100" fill="#0099ff" stroke="#0022bb" id="bar5" /> <!-- グラフ枠 --> <line x1="40" y1="40" x2="40" y2="240" stroke="#888888" strokeWidth="2" /> <line x1="40" y1="240" x2="360" y2="240" stroke="#888888" strokeWidth="2" /> <text x="65 125 185 245 305" y="260">12345</text> </svg> |
jQueryを使い、テーブルから順に数値を読み取り、
グラフに反映させるようにしました。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <table> <tr class="ttl"> <th> </th> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> <tr class="selected"> <th>A</th> <td class="v1">10</td> <td class="v2">20</td> <td class="v3">30</td> <td class="v4">40</td> <td class="v5">50</td> </tr> <tr> <th>B</th> <td class="v1">50</td> <td class="v2">40</td> <td class="v3">30</td> <td class="v4">20</td> <td class="v5">10</td> </tr> <tr> <th>C</th> <td class="v1">50</td> <td class="v2">30</td> <td class="v3">10</td> <td class="v4">30</td> <td class="v5">50</td> </tr> </table> |
jQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | $(function(){ var cntTime= 3; setInterval(function(){ //3秒ごとに読み取る行を変更 //選択行の変更 if(cntTime <= 4){ $("tr:nth-child(" + cntTime + ")").addClass("selected"); $("tr:not(:nth-child("+ cntTime +"))").removeClass("selected"); controlSvg(cntTime); cntTime++; }else{ cntTime = 2; $("tr:nth-child(" + cntTime + ")").addClass("selected"); $("tr:not(:nth-child("+ cntTime +"))").removeClass("selected"); controlSvg(cntTime); cntTime++; } },3000); function controlSvg(n){ var y = 0; var h = 0; v = new Array(7); for(var i=1; i < 6; i++){ v[i] = $("tr.selected td.v" + i).text(); //テーブルの数値読み取り h = v[i] * 2 y = 240 - h; $("#bar" + i).attr("y", y).attr("height", h); //SVGの変更 } } }); |
これをアニメーションで変更するようにできれば、更に見栄えが良くなると思います。
インラインSVGは基本的にCSSで変更ができないので、jQueryのanimateによるアニメーションができません。
SVGで元々定義されている<animate>も、インラインSVGでは対応していないブラウザも今のところ多いので(IE9でも非対応)、
javascriptのsetInterval()やsetTimeOut()を利用してアニメーションする必要があるようです(参考)。
Author Profile
SHARE
