SVGで折れ線グラフを描いてみた

　どうも！LSSです！！

かなーり以前にですが、

JavaScriptと<canvas>タグを使って、ブログ記事上に折れ線グラフを表示させてみた事があります。

<canvas>タグを使うと、その中にJavaScriptから自由に線を引いて画像としての表現ができるので、それをただの折れ線グラフに使うという贅沢な？使い方でした。

で、「コードから画像のような表現を行う」という意味ではSVGでも同様なので、今回は「折れ線グラフをSVGで描いてみる」というのを試みてみました！

折れ線グラフ
コード
折れ線データはコードの赤文字部分
余談

f:id:little_strange:20210606224313p:plain

折れ線グラフ

コード

※はてなブログのHTML編集画面で<svg>タグを挿入する場合は、前後に[]を入れて

[]<svg (中略) </svg>[]

のようにする必要があります。

折れ線データはコードの赤文字部分

M 0,-119 L 50,-114 100,-134 150,-174 200,-178 250,-152 300,-153 350,-164 400,-127 450,-97 500,-155 550,-167 600,-149 650,-166 700,-178 750,-154 800,-114 850,-177 900,-208 950,-149 1000,-183

この部分が、折れ線グラフのデータとなる部分です。

１つめの座標の前には「M」を、２つめの座標の前には「L」を入れる必要がありますが、それ以外は「X座標,Y座標」のセットを並べているだけなので、データの追加・修正が容易にできますね。

それぞれのX座標については、今回は50刻みで並べています。

Y座標の方がちょっと問題で…全て「-」をつけてマイナスの値としています。

というのも、一般的な「グラフ」のY軸は「↑がプラス」なのに対し、JavaScriptであれSVGであれCSSもそうですが、コンピュータで表現する時のY座標は「↓がプラス」と、方向が逆なんですね^^;

JavaScriptで扱う場合は、データとしてはそのままの数値で、スクリプト内でマイナス計算するだけで済みましたが、SVGの場合はそのままの数値となるため、
「いっそそのまま負の数にして、描画領域を負の数値のエリアを出すようにしよう」
としたのが今回の例となります。

ちなみに「描画領域」はコード一行目の
viewbox="-40 -500 1040 540"
のところで
「X座標-40、Y座標-500の地点を画像左上の座標とし、そこから横に1040、縦に540のエリアを表示させる」
という指定にしています。

これにより、横のX座標は-40～1000、縦のY座標は-500～40の範囲が表示される事になります。

その後に6つの似たような<path>タグ、

<path d="M 0,-500 L 0,40" stroke-width="3"></path>
<path d="M -40,0 L 1040,0" stroke-width="3"></path>
<path d="M -40 -100 L 1040,-100" stroke-width="1" stroke="gray"></path>
<path d="M -40 -200 L 1040,-200" stroke-width="1" stroke="gray"></path>
<path d="M -40 -300 L 1040,-300" stroke-width="1" stroke="gray"></path>
<path d="M -40 -400 L 1040,-400" stroke-width="1" stroke="gray"></path>

が並んでいますが、上２つが原点(0,0)を通る軸線、あとの４行が「Y軸100ごと」の目安となる灰色の線となります。

計７本の線を引いているだけですが、グラフ上に数値表示を足したい時などは<text>タグを追加するなど、グラフを自由に豪華にしていけますね^^

参考：【SVG】続・ちょっとだけSVGを試してみる【文字入れ】