写成简单插件的代码github地址:https://github.com/Onewwway/web-roseChart (插件写得不是很熟练,请多多指教)
简单版:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: #000;">
<canvas id="canvas" width="1200" height="500"></canvas >
<script>
var canvas = document.getElementById('canvas');
let semicircle = canvas.getContext('2d');
let data = [{
name: '鄂',
percent: 50.2
},{
name: '粤',
percent: 16.6
},{
name: '川',
percent: 10.4
},{
name: '京',
percent: 9.9
},{
name: '苏',
percent: 8.2
},{
name: '其他',
percent: 3.2
}]
let start = Math.PI, end = Math.PI;
// 位移到圆心,方便绘制
semicircle.translate(600, 300);
function setChart(){
for(let i = 0; i < data.length; i++){
end += Math.PI / data.length; // 终止角度
let limit = 15 - Math.round(data[i].percent / 100 * 15);
for(let j = 1; j <= 15; j++){
if(j > limit){
// 开始一条新路径
semicircle.beginPath();
// 移动到圆心
semicircle.moveTo(0, 0);
semicircle.fillStyle = "#303030";
semicircle.strokeStyle = "#000";
semicircle.lineWidth = 2;
semicircle.arc(0, 0, 200 - j * 12, start, end);
// 闭合路径
semicircle.fill();
semicircle.closePath();
semicircle.stroke();
}else if(j == limit){
// 开始一条新路径
semicircle.beginPath();
// 移动到圆心
semicircle.moveTo(0, 0);
semicircle.fillStyle = "#26E2E3";
semicircle.strokeStyle = "#000";
semicircle.lineWidth = 2;
semicircle.arc(0, 0, 200 - j * 12, start, end);
// 闭合路径
semicircle.fill();
semicircle.closePath();
semicircle.stroke();
}else{
// 开始一条新路径
semicircle.beginPath();
// 移动到圆心
semicircle.moveTo(0, 0);
semicircle.fillStyle = "#141414";
semicircle.strokeStyle = "#000";
semicircle.lineWidth = 2;
semicircle.arc(0, 0, 200 - j * 12, start, end);
// 闭合路径
semicircle.fill();
semicircle.closePath();
semicircle.stroke();
}
}
start = end; // 起始角度
}
}
function setWords(){
let angle;
for(let i = 0; i < data.length; i++){
if(i == 0){
angle = Math.PI + Math.PI / data.length / 2;
}else{
angle = Math.PI + Math.PI / data.length / 2 + Math.PI / data.length * i; // 30°
}
semicircle.save();
semicircle.translate(Math.cos(angle) * 220 - 230, Math.sin(angle) * 220);
semicircle.font = "14px scans-serif";
semicircle.fillStyle = "#FFF";
semicircle.fillText(data[i].name, 210, -6);
semicircle.font = "14px scans-serif";
semicircle.fillStyle = "#26E2E3";
semicircle.fillText(data[i].percent + "%", 210, 14);
semicircle.restore();
}
}
setChart();
setWords();
</script>
</body>
</html>