首頁 > web前端 > H5教程 > 主體

canvas繪製餅圖的方法介紹(程式碼)

不言
發布: 2019-04-03 13:10:45
轉載
4088 人瀏覽過

這篇文章帶給大家的內容是關於canvas繪製餅圖的方法介紹(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

一.任務說明

使用原生canvasAPI繪製圓餅圖(南丁格爾玫瑰)。 (截圖以及資料來自於百度Echarts官方範例庫【檢視範例連結】)。

canvas繪製餅圖的方法介紹(程式碼)

二. 重點提示

南丁格爾玫瑰圖的畫法有很多種,Echarts中提供的以半徑或面積兩種不同模式,本文以面積比例畫法為例,繪製演算法如下:

  1. 決定每個磁區的角度。由於所有磁區的角度加在一起為2π ,我們先依照資料比例來計算角度:

canvas繪製餅圖的方法介紹(程式碼)

  1. 每個磁區面積與總面積之間的比例即為數值的比,將給定參數數組options.radius中的最大和最小數值作為數值最大的一塊扇形的繪圖數據,代入如下公式即可求得總面積S

canvas繪製餅圖的方法介紹(程式碼)

  1. 再利用上述公式分別計算出每個扇形對應的外圓半徑,在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);
}
登入後複製

瀏覽器中可查看效果:

canvas繪製餅圖的方法介紹(程式碼)

四. hover高亮的實現想法

  1. 繪圖過程中,將每個扇區的繪圖資料(半徑,相對於圓心的起始轉角,扇區角度)均掛載在繪圖資料上。
  2. canvas標籤上監聽滑鼠移動事件mousemove,並在回呼函數中將滑鼠移動事件event.clientX event.clientY轉換為相對於canvas座標的數值(mouseX,mouseY)
  3. 從圓心座標(paintingCenter.x,paintingCenter.y)(mouseX,mouseY)連接為向量,根據該向量的角度和模即可判斷滑鼠是否處於某個磁區之上。
  4. 如果處於磁區之上,則以轉場動畫來繪製關鍵影格使得hover效果表現出來。先修改context.fillStyle顏色為對應扇區的高亮色,然後讓外圓繪圖半徑以線性的方式逐幀增加至目標大小(例如10%),每一幀中使用canvas繪圖上下文重新對繪圖區域進行封閉畫線,然後填滿即可。
  5. hover效果出現時繪製高亮色的繪圖區域,hover效果消失時從外圓開始逐幀繪製白色外層扇區即可,最終再將資料扇區繪製為原色。

【相關推薦:HTML5影片教學

#

以上是canvas繪製餅圖的方法介紹(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!