本文要实现的图形
一个简单的占比统计。。
实现的方案是html js合成
首先是简单的HTML布局
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>statistics</title>
<script src="jquery.min.js"></script>
</head>
<body>
<style>
.zh-chart {
width: 100px;
height: 100px;
background: #142838;
}
</style>
<div class="zh-chart" data-b="40/50" data-c="20/30" data-d="10/50" data-e="30/30" data-f="20/70"></div>
</body>
</html>然后通过js来实现我们的最终效果，相应的操作都有注释。
<script>
var chartEle = $('.zh-chart');
var canvas = document.createElement('canvas');
canvas.width = chartEle.width();
canvas.height = chartEle.height();
var radius = canvas.width/2;
chartEle.append(canvas);
var ctx = canvas.getContext('2d');
// 内圆
ctx.arc(radius, radius, radius*2/3, 0, 2*Math.PI);
ctx.fillStyle="rgba(22,196,203,0.1)";
ctx.fill();
ctx.strokeStyle = '#16C4CB';
ctx.stroke();
// 虚线圆环
ctx.translate(radius, radius); // 改变旋转中心
ctx.beginPath();
ctx.arc(0, 0, radius*2/3+4, 0, Math.PI/30);
ctx.strokeStyle = '#16C4CB';
ctx.stroke();
ctx.closePath();
for(var i=0; i<40; i++) {
ctx.beginPath();
ctx.rotate(10*Math.PI/180);
ctx.arc(0, 0, radius*2/3+4, 0, Math.PI/30);
ctx.strokeStyle = '#16C4CB';
ctx.stroke();
ctx.closePath();
}
// 外圆环
ctx.beginPath();
ctx.arc(0, 0, radius-4, 0, 2*Math.PI);
ctx.strokeStyle = '#16C4CB';
ctx.stroke();
ctx.closePath();
// 数据渲染
var data = [
{val: chartEle.data('b'), color: '#AF4A6F'},
{val: chartEle.data('c'), color: '#16C4CB'},
{val: chartEle.data('d'), color: '#887BD0'},
{val: chartEle.data('e'), color: '#19B478'},
{val: chartEle.data('f'), color: '#DE725A'}
];
// ctx.rotate(100*Math.PI/180);
for(var j=0; j<5; j++) {
var rate = data[j].val.split('/');
ctx.beginPath();
ctx.rotate(72*Math.PI/180);
ctx.arc(0, 0, radius-4, 0, (2*Math.PI)/5*(rate[0]/rate[1]));
ctx.strokeStyle = data[j].color;
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
}
</script>感觉关注~~~~ 啦啦啦
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。