SVGタグでグラフ作成
今頃ですが、SVGタグの存在を教えてもらいました。
webブラウザに図を表示する規格です。
（ベクターグラフィックを利用する規格）
最近web開発を始めた私には、驚きの機能です。
例えば、Adobe Illustratorで書いた絵をSVG保存。できたテキスト文をHTMLに埋め込むだけで利用できます。
HTMLのCanvas機能の存在は知っていましたが、面倒くさそうってイメージあるし、今さらFlashもね～。
今回、横棒グラフを作る必要があり、何かのツールで実現を検討中のタイミングで教えてもらい、早速試しています。
棒グラフのひな形をIllustratorで作成
ｓｖｇ形式で保存、保存したファイルの下記を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>
このブログに張り付けてみました
X,Y座標をPHPで動的に変更して利用する予定です。
簡単にできそうですね、いろんなライブラリ使わなくても実現できるので重宝しそう。
以上
