這篇文章帶給大家的內容是關於canvas繪製餅圖的方法介紹(程式碼)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一.任務說明
使用原生canvasAPI繪製圓餅圖（南丁格爾玫瑰）。 （截圖以及資料來自於百度Echarts官方範例庫【檢視範例連結】)。
二. 重點提示
南丁格爾玫瑰圖的畫法有很多種，Echarts中提供的以半徑或面積兩種不同模式，本文以面積比例畫法為例，繪製演算法如下：
- 決定每個磁區的角度。由於所有磁區的角度加在一起為2π ，我們先依照資料比例來計算角度：
- 每個磁區面積與總面積之間的比例即為數值的比，將給定參數數組
options.radius中的最大和最小數值作為數值最大的一塊扇形的繪圖數據，代入如下公式即可求得總面積S：
- 再利用上述公式分別計算出每個扇形對應的外圓半徑，在canvas中繪製路徑並填充即可。
三. 範例程式碼
南丁格爾玫瑰圖繪製範例程式碼：
//绘制饼图
drawPieChart(options);
/**
* 绘制饼图
* @param {[type]} options [description]
* @return {[type]} [description]
*/
function drawPieChart(options) {
//记录最大数值以反求面积总和
options.maxValue = 0;
//求数据集总和以在后续计算每个扇形的角度比例
options.totalNum = options.data.reduce((pre,cur)=>{
if (cur.value > options.maxValue) {
options.maxValue = cur.value;
}
return pre+cur.value;
},0);
/*以最大值对应最大半径来计算面积总和，并覆盖原值
*使得最大的一块扇形外圆半径为options.radius[0]
*内圆半径为options.radius[1]
*/
let Rmin = options.radius[0];
let Rmax = options.radius[1];
let r = Math.sqrt((Rmax*Rmax - Rmin*Rmin)*options.totalNum / options.maxValue + Rmin*Rmin);
options.radius[1] = r;
//移动坐标系原点至绘图中心
let paintingCenter={
x:parseInt(options.center[0],10)/100 * (options.chartZone[2] - options.chartZone[0]) + options.chartZone[0],
y:parseInt(options.center[1],10)/100 * (options.chartZone[3] - options.chartZone[1]) + options.chartZone[1]
}
context.translate(paintingCenter.x, paintingCenter.y);
//绘制每个扇形,过程中累加旋转角度
let allAngle = options.data.reduce((prev,cur,index)=>{
context.fillStyle = options.colorPool[index]
let angle = calcPaintingData(cur,options);
return prev + angle;
},0);
//绘制中空白色圆
context.beginPath();
context.fillStyle = 'white';
context.arc(0,0,options.radius[0],0,2*Math.PI,false);
context.fill();
}
/**
* 计算每个扇形所需要的绘图参数
*/
function calcPaintingData(data,options) {
let scale = data.value / options.totalNum;
let angle = scale * 2 * Math.PI;
let Rmin = options.radius[0];
let Rmax = options.radius[1];
let r = Math.sqrt(scale * (Rmax*Rmax - Rmin*Rmin) + Rmin*Rmin);
data.r = r;
//绘制扇形
paintFan({
r:r,
angle:angle,
data:data,
options:options
});
return angle;//将角度值返回给外层函数以供累加
}
//绘制扇形
function paintFan(opt) {
context.beginPath();
context.lineTo(opt.r,0);
context.arc(0,0,opt.r,0,opt.angle,false);
context.lineTo(0,0);
context.closePath();
context.fill();
context.rotate(opt.angle);
}登入後複製
瀏覽器中可查看效果：
四. hover高亮的實現想法
- 繪圖過程中，將每個扇區的繪圖資料（半徑，相對於圓心的起始轉角，扇區角度）均掛載在繪圖資料上。
- 在
canvas標籤上監聽滑鼠移動事件mousemove,並在回呼函數中將滑鼠移動事件event.clientX和 event.clientY轉換為相對於canvas座標的數值(mouseX,mouseY)。
- 從圓心座標
(paintingCenter.x,paintingCenter.y)到(mouseX,mouseY)連接為向量，根據該向量的角度和模即可判斷滑鼠是否處於某個磁區之上。
- 如果處於磁區之上，則以轉場動畫來繪製關鍵影格使得hover效果表現出來。先修改
context.fillStyle顏色為對應扇區的高亮色，然後讓外圓繪圖半徑以線性的方式逐幀增加至目標大小（例如10%）,每一幀中使用canvas繪圖上下文重新對繪圖區域進行封閉畫線，然後填滿即可。
hover效果出現時繪製高亮色的繪圖區域，hover效果消失時從外圓開始逐幀繪製白色外層扇區即可，最終再將資料扇區繪製為原色。
【相關推薦：HTML5影片教學】
#
以上是canvas繪製餅圖的方法介紹(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章！
