JS+canvas動態(tài)繪制餅圖的方法示例

更新時間：2017年09月12日 12:02:59 作者：ITzhongzi

這篇文章主要介紹了JS+canvas動態(tài)繪制餅圖的方法,結合具體實例形式分析了js+canvas實現(xiàn)餅狀圖形繪制的相關操作技巧,需要的朋友可以參考下

本文實例講述了JS+canvas動態(tài)繪餅圖的方法。分享給大家供大家參考，具體如下：

運行效果圖如下：

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn canvas餅狀圖</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
  var colors = (function () {
    return ( "aliceblue,antiquewhite,aqua,aquamarine,azure,beige,bisque,black,blanchedalmond,blue," +
    "blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk," +
    "crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta," +
    "darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray," +
    "darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick," +
    "floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey," +
    "honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon," +
    "lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink," +
    "lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyellow," +
    "lime,limegreen,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple," +
    "mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue," +
    "mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid," +
    "palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue," +
    "purple,rebeccapurple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna," +
    "silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,transparent," +
    "tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen" ).split(',');
  })();
  function Bing(obj) {
    this.start = 0;
    for(var key in obj){
      this[key] = obj[key];
    }
    this.init();
  }
  Bing.prototype = {
    init: function () {
      this.handle();
      this.render(this.data2);
      this.drawText();
    },
    /**
     * 渲染頁面
     * @param obj
     * @param i
     */
    render: function (obj) {
      //3、計算每一個扇形的起始弧度和結束弧度
      this.data2.forEach(function (v, i) {
        var obj = {};
        //第一個扇形的起始弧度：start 結束：start+第一個扇形占據(jù)的弧度差
        obj.start = this.start;
        obj.end = this.start + v.radian;
        this.start += v.radian;
        //繪制扇形
        this.ctx.beginPath();
        this.ctx.moveTo(300, 300);
        this.ctx.arc(300, 300, 150, obj.start, obj.end);
        this.ctx.fillStyle = colors[i * 15];
        this.ctx.fill();
      }, this);
    },
    /**
     * 處理數(shù)據(jù)
     */
    handle:function(){
      var sum = 0;
      this.data.forEach(function (v) {
        sum += v;
      });
      //2、計算每一個數(shù)據(jù)所占的比重
      this.data2 = this.data.map(function (v) {
        var obj = {};
        obj.number = v;
        obj.ratio = v / sum;//每個數(shù)據(jù)占據(jù)的比重
        obj.radian = 2 * Math.PI * v / sum;//該扇形所占據(jù)的弧度
        obj.start = this.start;
        obj.end = this.start + obj.radian;
        this.start = obj.end;
        return obj;
      },this);
    },
    drawText:function(){
      this.ctx.font = "30px 微軟雅黑";
      this.ctx.fillStyle = 'red';
      this.data2.forEach(function(obj){
        //計算文字所在的弧度
        r2 = obj.start + obj.radian/2;
        //就按相對于圓心文字偏移的位置
        b = this.r*Math.cos(r2);
        h = this.r*Math.sin(r2);
        //文字的位置
        var x2 = this.x + b;
        var y2 = this.y + h;
        this.ctx.fillText(obj.number,x2,y2);
      },this);
    }
  };
  var canvas = document.querySelector('canvas');
  var ctx = canvas.getContext('2d');
  var data = [1, 3, 5, 7, 9];
  var bing = new Bing({
    ctx:ctx,
    x:300,
    y:300,
    r:150,
    data:data
  });
</script>
</html>

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript圖形繪制技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: