实例:折线图
下面将一张数据表格画成折线图。
Date |Amount
-----|------
2014-01-01 | $10
2014-02-01 | $20
2014-03-01 | $40
2014-04-01 | $80
上面的图形,可以画成一个坐标系,Date
作为横轴,Amount
作为纵轴,四行数据画成一个数据点。
<svg width="350" height="160">
<g class="layer" transform="translate(60,10)">
<circle r="5" cx="0" cy="105" />
<circle r="5" cx="90" cy="90" />
<circle r="5" cx="180" cy="60" />
<circle r="5" cx="270" cy="0" />
<g class="y axis">
<line x1="0" y1="0" x2="0" y2="120" />
<text x="-40" y="105" dy="5">$10</text>
<text x="-40" y="0" dy="5">$80</text>
</g>
<g class="x axis" transform="translate(0, 120)">
<line x1="0" y1="0" x2="270" y2="0" />
<text x="-30" y="20">January 2014</text>
<text x="240" y="20">April</text>
</g>
</g>
</svg>