yj.微信小程序 長短不一的餅狀圖

今天項目有個需求，發過來瞅了一眼，尼瑪哦，這尼瑪是畫的吧，畫的吧！！！（圖1）

圖1

趕緊百度一波 ，沒有。。。沒有。。。沒有。。。擦嘞  要哭惹   ，百度h5的  有個看起來很舒的  

https://blog.csdn.net/Welkin_qing/article/details/84592210

還好看的懂h5 但是差距還是很大    emmmmm   最終我放棄寫成一摸一樣了     結果 如： （圖二）

圖2

 

圖2代碼：

.js:

var context = wx.createCanvasContext('Canvas');

    var array = [3,10,10,7,5,5,8,6];

    var arraystr = ['職業發展', '財務狀況', '個人健康', '娛樂休閒', '家庭', '朋友和重要他人', '個人成長', '自我實現'];

    var colors = ["red", "blue", "yellow", "green", "purple", "black", "gold","forestgreen"];

    /*伸出去的線的長度*/

    var outLine = 30;

    /*說明的矩形大小*/

    var rectW = 30;

    var rectH = 16;

    var space = 20;

    var total = 0;

    for (var val = 0; val < array.length; val++) {

      total += array[val];

    }

    var point = { x: 250, y: 120 };

    var radius = [7 * 3, 7 * 10, 7 * 10, 7 * 7, 7 * 5, 7 * 5, 7 * 8, 7 *6];

    for (var i = 0; i < array.length; i++) {

      context.beginPath();

      var start = 0;

      if (i > 0) {

        for (var j = 0; j < i; j++) {

          start += array[j] / total * 2 * Math.PI;

        }

      }

      context.arc(point.x, point.y, radius[i], start, start + array[i] / total * 2 * Math.PI, false);

      context.setLineWidth(0)

      context.lineTo(point.x, point.y);

      context.setStrokeStyle('#F5F5F5');

      context.setFillStyle(colors[i]);

      context.fill();

      context.closePath();

      context.stroke();

 

      var edge = radius[i] + outLine;

      /*x軸方向的直角邊*/

      var edgeX = Math.cos(start + (array[i] / total * 2 * Math.PI)/2) * edge;

      /*y軸方向的直角邊*/

      var edgeY = Math.sin(start + (array[i] / total * 2 * Math.PI) / 2) * edge;

      var outX = point.x + edgeX;

      var outY = point.y + edgeY;

      context.beginPath();

      context.moveTo(point.x, point.y);

      context.lineTo(outX, outY);

      context.strokeStyle = colors[i];

      /*畫文字和下劃線*/

      /*線的方向怎麼判斷 伸出去的點在X0的左邊 線的方向就是左邊*/

      /*線的方向怎麼判斷 伸出去的點在X0的右邊 線的方向就是右邊*/

      /*結束的點座標  和文字大小*/

      context.font = "14rpx Microsoft YaHei";

 

      const metrics = context.measureText(array[i]);

      var textWidth = metrics.width;

      if (outX > point.x) {

        /*右*/

        context.lineTo(outX + textWidth, outY);

        context.textAlign = 'left';

      } else {

        /*左*/

        context.lineTo(outX - textWidth, outY);

        context.textAlign = 'right';

      }

      context.stroke();

      context.textBaseline = 'bottom';

      context.fillText(array[i], outX, outY);

      /*繪製說明*/

      /*矩形的大小*/

      /*距離上和左邊的間距*/

      /*矩形之間的間距*/

      context.fillRect(space, space + i * (rectH + 10), rectW, rectH);

      /*繪製文字*/

      context.beginPath();

      context.textAlign = 'left';

      context.textBaseline = 'top';

      context.font = '12px Microsoft YaHei';

      context.fillText(arraystr[i], space + rectW + 10, space + i * (rectH + 10));

    }

    context.draw();

 

.wxml

<canvas canvas-id="Canvas" style="width: 400px; height: 400px;">

        </canvas>

 

最後花了兩個小時出來的樣子（圖3）

圖3

還有一個問題  無法百分百還原，這個邊上的框內文字怎麼加，加應該是可以加的 但是目前時間不允許啊哈  

圖3代碼

.js

// var arraystr = ['職業發展', '財務狀況', '個人健康', '娛樂休閒', '家庭', '朋友和重要他人', '個人成長', '自我實現'];

  //  var colors = ["red", "blue", "yellow", "green", "purple", "black", "gold", "forestgreen"];

  //  var array1 = [.1, .1, .1, .1, .2, .2, .1, .1];

  //  /*伸出去的線的長度*/

  //  var outLine = 30;

  //  /*說明的矩形大小*/

  //  var rectW = 30;

  //  var rectH = 16;

  //  var space = 20;

  //  var array = [10, 10, 10, 10, 10, 10, 10, 10];

  //  var point = { x: 200, y: 150 };

  //  var radius = [100, 100, 100, 100, 100, 100, 100, 100];

  //  var context = wx.createCanvasContext('Canvas1');

 

  //  var total = 0;

  //  for (var val = 0; val < array.length; val++) {

  //    total += array[val];

  //  }

  //  for (var i = 0; i < array.length; i++) {

  //    context.beginPath();

  //    var start = 0;

  //    if (i > 0) {

  //      for (var j = 0; j < i; j++) {

  //        start += array[j] / total * 2 * Math.PI;

  //      }

  //    }

  //    context.arc(point.x, point.y, radius[i], start, start + array[i] / total * 2 * Math.PI, false);

  //    context.setLineWidth(1)

  //    context.lineTo(point.x, point.y);

  //    context.setStrokeStyle('#333333');

  //    context.setFillStyle('#fff');

  //    context.fill();

  //    context.closePath();

  //    context.stroke();

  //  }

  //  context.draw();

  //  var radius2 = [80, 80, 80, 80, 80, 80, 80, 80];

  //  var context2 = wx.createCanvasContext('Canvas2');

  //  var total = 0;

  //  for (var val = 0; val < array.length; val++) {

  //    total += array[val];

  //  }

  //  for (var i = 0; i < array.length; i++) {

  //    context2.beginPath();

  //    var start = 0;

  //    if (i > 0) {

  //      for (var j = 0; j < i; j++) {

  //        start += array[j] / total * 2 * Math.PI;

  //      }

  //    }

  //    context2.arc(point.x, point.y, radius2[i], start, start + array[i] / total * 2 * Math.PI, false);

  //    context2.setLineWidth(1)

  //    context2.lineTo(point.x, point.y);

  //    context2.setStrokeStyle('#333333');

  //    context2.setFillStyle('#fff');

  //    context2.fill();

  //    context2.closePath();

  //    context2.stroke();

  //  }

  //  context2.draw();

  //  var radius3 = [70, 50, 70, 80, 40, 60, 50, 30];

  //  var context3 = wx.createCanvasContext('Canvas3');

  //  var total = 0;

  //  for (var val = 0; val < array.length; val++) {

  //    total += array[val];

  //  }

  //  for (var i = 0; i < array.length; i++) {

  //    context3.beginPath();

  //    var start = 0;

  //    if (i > 0) {

  //      for (var j = 0; j < i; j++) {

  //        start += array[j] / total * 2 * Math.PI;

  //      }

  //    }

  //    context3.arc(point.x, point.y, radius3[i], start, start + array[i] / total * 2 * Math.PI, false);

  //    context3.setLineWidth(1)

  //    context3.lineTo(point.x, point.y);

  //    context3.setStrokeStyle('#333333');

  //    context3.setFillStyle(colors[i]);

  //    context3.fill();

  //    context3.closePath();

  //    context3.stroke();

 

 

 

  //  var edge = radius[i]+20 ;

  //    /*x軸方向的直角邊*/

  //    var edgeX = Math.cos(start + (array[i] / total * 2 * Math.PI)/2) * edge;

  //    /*y軸方向的直角邊*/

  //    var edgeY = Math.sin(start + (array[i] / total * 2 * Math.PI) / 2) * edge;

  //    var outX = point.x + edgeX;

  //    var outY = point.y + edgeY+10;

  //    context3.beginPath();

  //    // context3.moveTo(point.x, point.y);

  //    // context3.lineTo(outX, outY);

  //    // context3.strokeStyle = colors[i];

  //    /*畫文字和下劃線*/

  //    /*線的方向怎麼判斷 伸出去的點在X0的左邊 線的方向就是左邊*/

  //    /*線的方向怎麼判斷 伸出去的點在X0的右邊 線的方向就是右邊*/

  //    /*結束的點座標  和文字大小*/

  //    context3.font = "14rpx Microsoft YaHei";

  //    const metrics = context3.measureText(radius3[i]);

  //    var textWidth = metrics.width;

  //    if (outX > point.x) {

  //      /*右*/

  //      context3.lineTo(outX + textWidth, outY);

  //      context3.textAlign = 'left';

  //    } else {

  //      /*左*/

  //      context3.lineTo(outX - textWidth, outY);

  //      context3.textAlign = 'right';

  //    }

  //    context3.stroke();

  //    context3.textBaseline = 'bottom';

  //    context3.fillText(radius3[i], outX, outY);

  //    // context3.fillRect(space, space + i * (rectH + 10), rectW, rectH);

  //    // /*繪製文字*/

  //    // context3.beginPath();

  //    // context3.textAlign = 'left';

  //    // context3.textBaseline = 'top';

  //    // context3.font = '12px Microsoft YaHei';

  //    // context3.fillText(arraystr[i], space + rectW + 10, space + i * (rectH + 10));

  //  }

  //  context3.draw();

.wxml

<!-- <canvas canvas-id="Canvas1" style="width: 400px; height: 400px;">

          <canvas canvas-id="Canvas2" style="width: 400px; height: 400px;">

            <canvas canvas-id="Canvas3" style="width: 400px; height: 400px;">

            </canvas>

          </canvas>

        </canvas> -->

 

 

 

在此作爲記錄  下次好用，有大佬有更好的方法  希望能夠提出，萬謝！！！