一个自定义扇形图表,内部嵌套折线,点

设计稿:

最后实现效果图:

话不多说,直接上代码!




  
  
  
  
  体测报告


直接复制粘贴就能看到效果。
此图考察了svg的各种使用;其中包含了,绘制圆形、圆环,点,折线,多边形,水平居中文字,三角函数计算坐标。关于手机端适配方面,直接使用svg的viewbox来实现。因为svg是矢量图形,无论放大缩小都不失真,所以可以用适用各种设备且效果显示出众。
公司给的设计稿是375宽度,我就用了375.你们也可以将d_width这个值直接设置为屏幕宽度。
如果有bug请告之。

你可能感兴趣的:(html5,javascript,canvas,svg)