实例:折线图

下面将一张数据表格画成折线图。

  1. Date |Amount
  2. -----|------
  3. 2014-01-01 | $10
  4. 2014-02-01 | $20
  5. 2014-03-01 | $40
  6. 2014-04-01 | $80

上面的图形,可以画成一个坐标系,Date作为横轴,Amount作为纵轴,四行数据画成一个数据点。

  1. <svg width="350" height="160">
  2. <g class="layer" transform="translate(60,10)">
  3. <circle r="5" cx="0" cy="105" />
  4. <circle r="5" cx="90" cy="90" />
  5. <circle r="5" cx="180" cy="60" />
  6. <circle r="5" cx="270" cy="0" />
  7. <g class="y axis">
  8. <line x1="0" y1="0" x2="0" y2="120" />
  9. <text x="-40" y="105" dy="5">$10</text>
  10. <text x="-40" y="0" dy="5">$80</text>
  11. </g>
  12. <g class="x axis" transform="translate(0, 120)">
  13. <line x1="0" y1="0" x2="270" y2="0" />
  14. <text x="-30" y="20">January 2014</text>
  15. <text x="240" y="20">April</text>
  16. </g>
  17. </g>
  18. </svg>