motogp fan

motogp ファンによる、雑ブログ、ガジェットネタも

SVGタグでグラフ作成

今頃ですが、SVGタグの存在を教えてもらいました。
webブラウザに図を表示する規格です。
ベクターグラフィックを利用する規格)
最近web開発を始めた私には、驚きの機能です。

例えば、Adobe Illustratorで書いた絵をSVG保存。できたテキスト文をHTMLに埋め込むだけで利用できます。

HTMLのCanvas機能の存在は知っていましたが、面倒くさそうってイメージあるし、今さらFlashもね~。


今回、横棒グラフを作る必要があり、何かのツールで実現を検討中のタイミングで教えてもらい、早速試しています。


棒グラフのひな形をIllustratorで作成

f:id:motagp:20150620085020j:plain

svg形式で保存、保存したファイルの下記をHTMLに貼り付け

 

SVGソース

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 500 50" enable-background="new 0 0 500 50" xml:space="preserve">
<g id="l2">
<line fill="none" stroke="#666666" stroke-width="3" stroke-miterlimit="10" x1="12.5" y1="0" x2="12.5" y2="50"/>
<line fill="none" stroke="#666666" stroke-width="1" stroke-miterlimit="10" x1="249.5" y1="0" x2="249.5" y2="50"/>
<line fill="none" stroke="#666666" stroke-width="3" stroke-miterlimit="10" x1="483.5" y1="0" x2="483.5" y2="50"/>
</g>
<g id="l1">
<line fill="none" stroke="#0000FF" stroke-width="10" stroke-miterlimit="10" x1="13" y1="17" x2="369" y2="17"/>
<line fill="none" stroke="#FF0000" stroke-width="10" stroke-miterlimit="10" x1="13" y1="35" x2="159" y2="35"/>
</g>
<g id="l3">
<g>
<text transform="matrix(1 0 0 1 380 21)" font-size="12">8</text>
<text transform="matrix(1 0 0 1 168.5 39)" font-size="12">3</text>
</g>
</svg

 

このブログに張り付けてみました

8 3

 

X,Y座標をPHPで動的に変更して利用する予定です。

f:id:motagp:20150620092849j:plain

簡単にできそうですね、いろんなライブラリ使わなくても実現できるので重宝しそう。

 

 

以上