html5多边形,用html5实现多边形的数字展示

网上看到一个网站展示分值占比，没使用柱状图，而是用的多边形。使用html5模仿了一个，效果如下：

使用方法：

$("#container").drawLineCircle({

radius:80,

data: [

{ 'title': '信用状况', 'value': 75 },

{ 'title': '抵押物评估', 'value': 70 },

{ 'title': '家访', 'value': 75 },

{ 'title': '面审分值', 'value': 50 },

{ 'title': '职业情况', 'value': 65 },

{ 'title': '稳定性', 'value': 75 },

{ 'title': '经济能力', 'value': 75 },

{ 'title': '基本素质', 'value': 75 }

]

});

/*

* 使用是，定义一个div#container，按124行代码调用即可。

* 参数说明及默认值：

radius: 90, //圆半径

width: 360, //画板宽

height: 200, //画板高

border: 'border:0px solid #424533', //画板边框

circleBackCorlor: '#F7F7F7', //圆的背景颜色

fontColor: '#000000', //标签颜色

textPaddingLine: -7, //标签离横线距离

lineColor: "#CBCBCB", //线颜色

uom: '分', //值单位

valuePaddingLine: 13, //分值离线距离

valueFillColor: '#88C276', //值颜色

titleFont: '14px 微软雅黑 bold', //标签字体

valueFont: '14px 宋体', //值字体

data:[{'title':标签,'value':分值}] //数据数组

*/

主文件是draw.js，可从GitHub下载。

https://github.com/xundh/html5ScoreLineCircle