インラインSVGを利用した棒グラフ

前回インラインSVGについてまとめてみましたが、

その利用方法がないか考えてみて、

棒グラフで活用する方法を思いついたので、

実際に作ってみました。

DEMO

グラフは、枠を<line>と<text>で、

グラフの本体を<rect>で描画しました。

SVG

XHTML

&lt;svg width="400" height="280"&gt; &lt;!-- グラフ本体 --&gt; &lt;rect x="60" y="220" width="20" height="20" fill="#0099ff" stroke="#0022bb" id="bar1" /&gt; &lt;rect x="120" y="200" width="20" height="40" fill="#0099ff" stroke="#0022bb" id="bar2" /&gt; &lt;rect x="180" y="180" width="20" height="60" fill="#0099ff" stroke="#0022bb" id="bar3" /&gt; &lt;rect x="240" y="160" width="20" height="80" fill="#0099ff" stroke="#0022bb" id="bar4" /&gt; &lt;rect x="300" y="140" width="20" height="100" fill="#0099ff" stroke="#0022bb" id="bar5" /&gt; &lt;!-- グラフ枠 --&gt; &lt;line x1="40" y1="40" x2="40" y2="240" stroke="#888888" strokeWidth="2" /&gt; &lt;line x1="40" y1="240" x2="360" y2="240" stroke="#888888" strokeWidth="2" /&gt; &lt;text x="65 125 185 245 305" y="260"&gt;12345&lt;/text&gt; &lt;/svg&gt;

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

XHTML

&lt;table&gt; &lt;tr class="ttl"&gt; &lt;th&gt;&amp;nbsp;&lt;/th&gt; &lt;th&gt;1&lt;/th&gt; &lt;th&gt;2&lt;/th&gt; &lt;th&gt;3&lt;/th&gt; &lt;th&gt;4&lt;/th&gt; &lt;th&gt;5&lt;/th&gt; &lt;/tr&gt; &lt;tr class="selected"&gt; &lt;th&gt;A&lt;/th&gt; &lt;td class="v1"&gt;10&lt;/td&gt; &lt;td class="v2"&gt;20&lt;/td&gt; &lt;td class="v3"&gt;30&lt;/td&gt; &lt;td class="v4"&gt;40&lt;/td&gt; &lt;td class="v5"&gt;50&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;B&lt;/th&gt; &lt;td class="v1"&gt;50&lt;/td&gt; &lt;td class="v2"&gt;40&lt;/td&gt; &lt;td class="v3"&gt;30&lt;/td&gt; &lt;td class="v4"&gt;20&lt;/td&gt; &lt;td class="v5"&gt;10&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;C&lt;/th&gt; &lt;td class="v1"&gt;50&lt;/td&gt; &lt;td class="v2"&gt;30&lt;/td&gt; &lt;td class="v3"&gt;10&lt;/td&gt; &lt;td class="v4"&gt;30&lt;/td&gt; &lt;td class="v5"&gt;50&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;

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>&nbsp;</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

$(function(){ var cntTime= 3; setInterval(function(){ //3秒ごとに読み取る行を変更 //選択行の変更 if(cntTime &lt;= 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 &lt; 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の変更 } } });

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()を利用してアニメーションする必要があるようです(参考)。

 

WRITER

ninomiya

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

この著者の記事を見る