canvas realize pie chart

The effect is as follows:

 

 

 

 html:

<canvas id="myCanvas" width="500" height="500"></canvas>

js:

toCanvas (ARR) { 
        let Canvas = document.getElementById ( 'myCanvas'); // Get Canvas 
        let canvas.getContext CTX = ( '2D'); // Get drawing environment through the getContext 
        let CONT = 0; // Total 
        let 0 = start; // start radian 
        the let X = 250 , 
          Y = 250; // dot coordinate 
        the let startCoordinate = { 
          start: 200 is , 
          End: 100 
        }; // draw the starting coordinates 
        arr.forEach ((item) => { 
          CONT + =item.number; 
        }); // Get the number and 
        arr.forEach ((Item) => { 
          ctx.beginPath (); // initialize the path 
          the let prop = item.number / CONT; // calculate the ratio 
          let radian = prop * (2 * Math.PI); // calculate a radian 
          ctx.arc (X, Y, 100, Start, Start + radian, to false ); // The curvature ratio and circle 
          ctx.lineTo (X, Y); / / connection center line drawing 
          ctx.fillStyle = item.color; // set the color of a circular arc 
          ctx.fill (); // fill style 
          the let X1 = X + Math.cos (Radian / Start + 2) * 100; //Get arcuate intermediate point X coordinate of 
          the let Math.sin, Y1 = y + (Radian / Start + 2) * 100; // Get arcuate intermediate point y coordinate 
          ctx.moveTo (X1, Y1); // move the pen to the arc midpoint 
          ctx.lineTo (X1 + 30 * Math.cos (Radian / Start + 2), Y1 + 30 * Math.sin, (Radian / Start + 2)); // the midpoint of the arc and the center connection Videos unit length of the line 30 
          the let proNumber = null ;
           IF (Math.cos (Radian / Start + 2)> 0 ) { 
            proNumber =. 1 
          } the else { 
            proNumber = -1 
          } // determines the current arc radius of the start point into line cosine of the angle is a negative / positive
          ctx.lineTo (X1 + 30 * Math.cos (Radian / Start + 2) + proNumber 30 *, 30 * Y1 + Math.sin, (Radian / Start + 2)); // the basis of a drawing 30 on the front horizontal unit length 
          ctx.fillText (item.name, x1 + 30 * Math.cos (radian / 2 + start) + proNumber * 20, y1 + 30 * Math.sin (radian / 2 + start) - 5, 30) ; // online font fill, provided the coordinates of the font, the maximum length 
          ctx.strokeStyle = item.color; // set the color of the font and line 
          ctx.font = "Bold 10px Consolas"; // set the font style 
          start + = radian; // every time the arc has been rendered as an initial accumulated arc arc arc next 
          ctx.stroke (); // render lines 
        }) 
        the let Small = new new Path2D (CTX); //Create a new path 
        small.arc (X, Y, 60, 0, * 2 Math.PI, to false ); // draw a circle 
        ctx.fillStyle = "#fff"; // set the color of the circle 
        ctx.fill (small ); // filled Small 
      },

 let arrs = [{
          name: '1号',
          color: '#CD853F',
          number: 500
        },
        {
          name: '2号',
          color: '#FFA500',
          number: 500
        },
        {
          name: '3号',
          color: '#FF4500',
          number: 200
        },
        {
          name: '4号',
          color: '#8B0000',
          number: 300
        },
        {
          name: '5号',
          color: '#DAA520',
          number: 50
        },
      ]
      this.toCanvas(arrs);

　　Some are not satisfied with the text and the bottom line is not consistent margin, but also find a lot of ways still without success. God saw big trouble gets advice. Many thanks.