Skip to content

Instantly share code, notes, and snippets.

@kinjouj
Created January 15, 2014 08:52
Show Gist options
  • Save kinjouj/8432903 to your computer and use it in GitHub Desktop.
Save kinjouj/8432903 to your computer and use it in GitHub Desktop.
SVG Bar and Line Chart
Display the source blob
Display the rendered blob
Raw
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
<defs>
<filter id="dropshadow" width="120%" height="120%">
<feGaussianBlur stdDeviation="1"/>
</filter>
</defs>
<!-- 左側のメモリ位置が描画する縦の線 -->
<line x1="10" y1="500" x2="500" y2="500" stroke="#999" />
<!-- 右側に描画する縦の線 -->
<line x1="500" y1="500" x2="500" y2="0" stroke="#999" />
<!-- バー下部に描画する横の線 -->
<line x1="10" y1="0" x2="10" y2="500" stroke="#999" />
<!-- 最初のX軸(0)から終端のX軸(+20)までを高さに50ポイントづつずらしてメモリ位置を描画 -->
<line x1="0" y1="450" x2="20" y2="450" stroke="#999" />
<line x1="0" y1="400" x2="20" y2="400" stroke="#999" />
<line x1="0" y1="350" x2="20" y2="350" stroke="#999" />
<line x1="0" y1="300" x2="20" y2="300" stroke="#999" />
<line x1="0" y1="250" x2="20" y2="250" stroke="#999" />
<line x1="0" y1="200" x2="20" y2="200" stroke="#999" />
<line x1="0" y1="150" x2="20" y2="150" stroke="#999" />
<line x1="0" y1="100" x2="20" y2="100" stroke="#999" />
<line x1="0" y1="50" x2="20" y2="50" stroke="#999" />
<line x1="0" y1="0" x2="20" y2="0" stroke="#999" />
<!--
xは位置(1つ1つでmarginを足していく)
yはheightと合わせると500になるように
widthはバーの幅
marginは40
-->
<rect x="50" y="450" width="20" height="50" fill="rgba(33, 99, 255, 0.5)" />
<rect x="90" y="400" width="20" height="100" fill="rgba(33, 99, 255, 0.5)" />
<rect x="130" y="350" width="20" height="150" fill="rgba(33, 99, 255, 0.5)" />
<rect x="170" y="300" width="20" height="200" fill="rgba(33, 99, 255, 0.5)" />
<rect x="210" y="250" width="20" height="250" fill="rgba(33, 99, 255, 0.5)" />
<rect x="250" y="200" width="20" height="300" fill="rgba(33, 99, 255, 0.5)" />
<rect x="290" y="150" width="20" height="350" fill="rgba(33, 99, 255, 0.5)" />
<rect x="330" y="100" width="20" height="400" fill="rgba(33, 99, 255, 0.5)" />
<rect x="370" y="50" width="20" height="450" fill="rgba(33, 99, 255, 0.5)" />
<rect x="410" y="0" width="20" height="500" fill="rgba(33, 99, 255, 0.5)" />
<rect x="450" y="450" width="20" height="50" fill="rgba(33, 99, 255, 0.5)" />
<!--
バーの幅は20で設定しているので、その中間は10でスタートとなるポイントのXに10を足す。
-->
<line x1="100" y1="400" x2="60" y2="450" stroke="#f00" stroke-width="2" />
<line x1="140" y1="350" x2="100" y2="400" stroke="#f00" stroke-width="2" />
<line x1="180" y1="300" x2="140" y2="350" stroke="#f00" stroke-width="2" />
<line x1="220" y1="250" x2="180" y2="300" stroke="#f00" stroke-width="2" />
<line x1="260" y1="200" x2="220" y2="250" stroke="#f00" stroke-width="2" />
<line x1="300" y1="150" x2="260" y2="200" stroke="#f00" stroke-width="2" />
<line x1="340" y1="100" x2="300" y2="150" stroke="#f00" stroke-width="2" />
<line x1="380" y1="50" x2="340" y2="100" stroke="#f00" stroke-width="2" />
<line x1="420" y1="0" x2="380" y2="50" stroke="#f00" stroke-width="2" />
<line x1="460" y1="450" x2="420" y2="0" stroke="#f00" stroke-width="2" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment