首先上一下效果圖：
左右的箭頭和下方的標注以及環形圖本身都可以控制環形圖的選中狀態。
首先講一下思路：
布局很簡單，我就不寫了，主要講下作圖過程。
首先跟圖需求可以知道，作出這樣的效果需要一組對象，每個對象有顏色，所占比例，名字等，也就是這樣：
let chartData=[
{color:"#FD7A4F",title:"其他",percent:0.2},
{color:"#FDD764",title:"建筑/土木工程",percent:0.25},
***
]
注意百分比加在一起必須是100%，也就是1，否則圓環可能不會畫滿，或者多處一部分。
根據每部分所占比例計算出每個部分所占的弧度，使用ctx.arc(x0, y0,r, startAngle, endAngle);畫出圓弧，當前項需要向外偏移一些，過程中具體上代碼講這部分：
首先定義一個multiCircleChart類,
//ES6寫法
class multiCircleChart {
constructor(id, chartDatas, defalutIndex,callback) {
/*構造函數：
傳入的參數ID，canvas的id,用于放置繪畫內容；
chartDatas：畫圖所需參數數據；
defalutIndex：defalutIndex:當前選中項
callback：點擊環形圖的回調函數
*/
this.canvas = document.getElementById(id);
this.size = this.canvas.parentNode.clientWidth * 4;
this.canvas.style.width = this.size / 4 + "px";
this.canvas.style.height = this.size / 4 + "px";
this.canvas.width = this.size;
this.canvas.height = this.size;
/*
因為在移動端畫圖需要多倍圖，這樣圖像會很清晰，所以這里size，也就是canvas的context設置為canvas大小的4倍；
注意：！！！canvas.width指的是畫布內容(context)的大小，cavas.style.width是canvas在頁面上顯示的大小，也就是說，真是的圖片是顯示圖片大小的4倍
*/
this.ctx = this.canvas.getContext("2d");
this.defalutIndex = defalutIndex;//當前選中項
this.chartDatas = chartDatas;//繪制所需數據
this.lineWidth = this.size/5;//環形圖的圓環寬度，設置為canvas寬度的1/5；
this.startAngle = -0.5;//環形圖起始角度，這里為-0.5，計算時也就是-0.5*Math.PI,放在坐標系中也就是環形圖最高點那個位置的角度；順便說一下，右側為0，下方為0.5，左側為1
this.callback=callback;
this.canvas.addEventListener('click',this.mouseDownEvent.bind(this));
/*給canvas添加監聽函數，并將事件傳遞過去，用于計算點擊位置在哪個數據項里*/
this.AngleList=[];//記錄每一項的結束角度，結合監聽事件，計算點擊事件的位置在哪個數據項里
}
}
構造函數寫好了，接下來需要畫環形圖了：
class multiCircleChart {
***
draw() {
this.ctx.clearRect(0,0,this.size,this.size);//每次繪畫前，先清空一下畫布，避免畫布被污染
if (this.chartDatas.length == 0) return;//如果傳入的參數長度為0的話，也就不需要繼續畫了
this.ctx.lineWidth = this.lineWidth;//為圓環寬度賦值
let startAngle = Math.PI * -0.5;//設置起始角度
let endAngle = startAngle;設置結束角度
this.AngleList=[];
/*下面就開始動筆畫圖了*/
this.chartDatas.map((item, i) => {
this.ctx.beginPath();//開始畫圖命令，避免粘連
this.ctx.strokeStyle = item.color;//設置邊框顏色，因為我們畫的是圓環，所以填充色不需要，只要有邊框色就行了
if (i > 0) {
//從第二項開始（i==1）時，起始角度就是上一次的結束角度
startAngle = endAngle;
}
endAngle = startAngle + item.percent * Math.PI * 2;//計算當前項的結束角度，根據所占的百分比計算所占角度（item.percent * Math.PI * 2），再結合起始角度就可以計算出真正的偏移角度了（startAngle + item.percent * Math.PI * 2）
this.AngleList.push(endAngle);
//選中當前項，需要向外偏移
if (i == this.defalutIndex) {
/*
選中當前項，需要向外偏移
使用起始角度和結束角度的中間值來就算偏移位置
*/
let centerAngle=(startAngle+endAngle)/2;
let x=this.lineWidth*0.2*Math.cos(centerAngle);//x軸偏移量
let y=this.lineWidth*0.2*Math.sin(centerAngle);//y軸偏移量
//未選中項的圓心位置是（this.size / 2, this.size / 2），選中的需要偏移，圓心是（this.size / 2+x, this.size / 2+y）；這樣畫出的環形就會向外偏移環形寬度的1/5了；
this.ctx.arc(this.size / 2+x, this.size / 2+y, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
} else {
this.ctx.arc(this.size / 2, this.size / 2, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
}
this.ctx.stroke();
});
}
}
現在所畫的圖是一個靜態的，點擊環形圖是不會有任何變化的,當然現在這樣也是可以用的
let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas,defalutIndex,);//new 一個
circlePeiChart.draw();//畫圖
外部切換選中項
circlePeiChart.defalutIndex=2;//修改選中項Index值
circlePeiChart.draw();//重繪
那么怎樣點擊canvas切換當前選項呢，思路很簡單：以canvas中心為圓心，監測點擊位置，點擊位置與圓心連成一線，以直角坐標系為參照，計算出點擊位置的弧度，跟angleList做比較，計算出點擊的是第幾項，然后修改defalutIndex，重繪canvas.
class multiCircleChart {
***
***
mouseDownEvent(e){
const [x1,y1]=[e.offsetX,e.offsetY];//點擊事件位置
const [x0,y0]=[this.size/2/4,this.size/2/4];//原點位置；注意：原點位置為canvas中心，不是context中心
let angle=0;
if(x1>x0){
//點擊位置在第一象限（y1>y0）或者第二象限(y1<y0)
y1<y0?angle=-0.5*Math.PI+Math.atan((x1-x0)/(y0-y1)):angle=Math.atan((y1-y0)/(x1-x0));
}else{
//點擊位置在第三象限（y1<y0）或者第四象限(y1>y0)
y1<y0?angle=Math.PI+Math.atan((y0-y1)/(x0-x1)):angle=Math.atan((x0-x1)/(y1-y0))+Math.PI*0.5;
}
for(let i=0;i<this.AngleList.length;i++){//計算角度落在第幾項
if(angle<this.AngleList[i]){
//當點擊位置角度值第一次大于某一項時，也就是說點擊位置就在這一項上
this.defalutIndex=i;//重新賦值defaultIndex
this.draw();//重繪canvas
this.callback?this.callback(i):'';//如果有回調函數，則調用毀掉函數
break;//跳出循環，結束操作；
}
}
}
}
最后把整體代碼貼上吧
//html
<canvas id="circle-pei-chart"></canvas>
//調用
let chartDatas=[ {color: "rgb(253, 122, 79)",title: "后端開發",percent: 0.2}, **];
let defalutIndex=0
let circlePeiChart = new multiCircleChart("circle-pei-chart",chartDatas, defalutIndex,(i)=>{defalutIndex=i});
circlePeiChart.draw();
//重繪
circlePeiChart.defaultIndex=2;
circlePeiChart.draw();
/*
chartDatas [ {color: "rgb(253, 122, 79)",title: "后端開發",percent: 0.2}, **];
*/
class multiCircleChart {
constructor(id, chartDatas, defalutIndex,callback) {
this.canvas = document.getElementById(id);
this.size = this.canvas.parentNode.clientWidth * 4;
this.canvas.style.width = this.size / 4 + "px";
this.canvas.style.height = this.size / 4 + "px";
this.canvas.width = this.size;
this.canvas.height = this.size;
this.ctx = this.canvas.getContext("2d");
this.defalutIndex = defalutIndex;
this.chartDatas = chartDatas;
this.lineWidth = this.size/5;
this.startAngle = -0.5;
this.callback=callback;
this.canvas.addEventListener('click',this.mouseDownEvent.bind(this));
this.AngleList=[];
}
draw() {
this.ctx.clearRect(0,0,this.size,this.size);
if (this.chartDatas.length == 0) return;
this.ctx.lineWidth = this.lineWidth;
this.ctx.lineCap="butt";
let startAngle = Math.PI * -0.5;
let endAngle = startAngle;
this.AngleList=[];
this.chartDatas.map((item, i) => {
this.ctx.beginPath();
this.ctx.strokeStyle = item.color;
if (i > 0) {
startAngle = endAngle;
}
endAngle = startAngle + item.percent * Math.PI * 2;
this.AngleList.push(endAngle);
//選中當前項，需要向外偏移
if (i == this.defalutIndex) {
//選中當前項，需要向外偏移
let centerAngle=(startAngle+endAngle)/2;
let x=this.lineWidth*0.2*Math.cos(centerAngle);
let y=this.lineWidth*0.2*Math.sin(centerAngle);
this.ctx.arc(this.size / 2+x, this.size / 2+y, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
} else {
this.ctx.arc(this.size / 2, this.size / 2, this.size / 2 - this.lineWidth / 2 - this.lineWidth * 0.2, startAngle, endAngle);
}
this.ctx.stroke();
});
}
mouseDownEvent(e){
const [x1,y1]=[e.offsetX,e.offsetY];
const [x0,y0]=[this.size/2/4,this.size/2/4];
let angle=0;
if(x1>x0){
y1<y0?angle=-0.5*Math.PI+Math.atan((x1-x0)/(y0-y1)):angle=Math.atan((y1-y0)/(x1-x0));
}else{
y1<y0?angle=Math.PI+Math.atan((y0-y1)/(x0-x1)):angle=Math.atan((x0-x1)/(y1-y0))+Math.PI*0.5;
}
for(let i=0;i<this.AngleList.length;i++){
if(angle<this.AngleList[i]){
this.defalutIndex=i;
this.draw();
this.callback?this.callback(i):'';
break;
}
}
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
