Blog

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

2012.11.28Cat:jQuery SVG デザイナー

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

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

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

実際に作ってみました。

 

DEMO

 

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

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

SVG

 

jQueryを使い、テーブルから順に数値を読み取り、

グラフに反映させるようにしました。

HTML

 

jQuery

 

これをアニメーションで変更するようにできれば、更に見栄えが良くなると思います。

インラインSVGは基本的にCSSで変更ができないので、jQueryのanimateによるアニメーションができません。

SVGで元々定義されている<animate>も、インラインSVGでは対応していないブラウザも今のところ多いので(IE9でも非対応)、

javascriptのsetInterval()やsetTimeOut()を利用してアニメーションする必要があるようです(参考)。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ