通過使用svg勾畫基本的折線圖，通過svg畫出簡單折線圖
效果圖：
代碼：
<svg width="350" height="160">
<g class="layer" transform="translate(60,10)">
<!-- 數據點 -->
<g class="data">
<circle r="5" cx="0" cy="105" fill="green"/>
<circle r="5" cx="90" cy="90" fill="green"/>
<circle r="5" cx="180" cy="60" fill="green"/>
<circle r="5" cx="270" cy="0" fill="green"/>
<!-- 數據連接成線 -->
<polyline points="0,105 90,90 180,60 270,0" fill="none" stroke="green" />
</g>
<g class="y axis">
<line x1="0" y1="0" x2="0" y2="120" style="stroke:gray;stroke-width:1"/> <!-- y軸 -->
<!-- y軸刻度 -->
<line x1="-10" y1="105" x2="0" y2="105" style="stroke:gray;stroke-width:1"/>
<line x1="-10" y1="90" x2="0" y2="90" style="stroke:gray;stroke-width:1"/>
<line x1="-10" y1="60" x2="0" y2="60" style="stroke:gray;stroke-width:1"/>
<line x1="-10" y1="30" x2="0" y2="30" style="stroke:gray;stroke-width:1"/>
<line x1="-10" y1="0" x2="0" y2="0" style="stroke:gray;stroke-width:1"/>
<!-- y軸頭部箭頭-->
<g class="ytop">
<line x1="0" y1="0" x2="0" y2="-10" style="stroke:gray;stroke-width:1"/>
<line x1="0" y1="-10" x2="5" y2="-5" style="stroke:gray;stroke-width:1"/>
<line x1="0" y1="-10" x2="-5" y2="-5" style="stroke:gray;stroke-width:1"/>
</g>
<!-- y軸刻度值 -->
<text x="-30" y="105" dy="5" style="font-size: 10px;">$10</text>
<text x="-30" y="0" dy="5" style="font-size: 10px;">$80</text>
</g>
<g class="x axis" transform="translate(0, 120)">
<line x1="0" y1="0" x2="270" y2="0" style="stroke:gray;stroke-width:1"/> <!-- X軸-->
<!-- x軸刻度 -->
<line x1="30" y1="0" x2="30" y2="10" style="stroke:gray;stroke-width:1"/>
<line x1="240" y1="0" x2="240" y2="10" style="stroke:gray;stroke-width:1"/>
<!-- X軸頭部箭頭-->
<line x1="270" y1="0" x2="265" y2="-5" style="stroke:gray;stroke-width:1"/>
<line x1="270" y1="0" x2="265" y2="5" style="stroke:gray;stroke-width:1"/>
<!-- x軸刻度值 -->
<text x="30" y="20" style="font-size: 10px;">January 2014</text>
<text x="240" y="20" style="font-size: 10px;">April</text>
</g>
</g>
</svg>