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

最新推荐文章于 2024-08-11 14:11:17 发布

编程圈子

最新推荐文章于 2024-08-11 14:11:17 发布

阅读量3.6k

点赞数

分类专栏： # JS-HTML 文章标签： html5 js jquery 图形

本文链接：https://blog.csdn.net/xundh/article/details/40343181

版权

JS-HTML 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

使用方法：

<html>
<head>
<script src='jquery-1.10.0.min.js'></script>
<script src='jsUtil.js'></script>
<script src='draw.js'></script>
</head>
<body>
<div id="container"></div>
<script>
$("#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':分值}]    //数据数组
*/
</script>
</body>
</html>

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

https://github.com/xundh/html5ScoreLineCircle