通过使用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>
扫一扫
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
