Question

关于Plunker的

我有 2 1个问题，~~当馅饼中有3个或更多切片时，看起来有一个未填充的小条子~~。另一种情况是，如果馅饼中的薄片少于3片，它看起来都很不稳定。

当切片超过馅饼的50％（看下面的StephenH评论）时，看起来好奇。

这是基于数组填充切片的代码位$scope.viewData是一个简单数组，例如[1,2,3]。 $scope.viewDataTotal变量是显示的示例数组的数组值6的总和。

    $scope.updateView = function () {
      if ($scope.viewData) {
        var svg = $element.children('svg');
        svg.empty();

        var cX = $element.width() / 2;
        var cY = $element.height() / 2;
        var r = cX;
        if (cY < r) {
          r = cY;
        }
        r -= 5;
        if (r < 0) {
          r = 0;
        }

        var sd = 0;
        var idxColor = 0;
        $scope.viewData.forEach(function(i) {
          var degrees = i / $scope.viewDataTotal * 360;

          var p = '<path d="';
          p += generateWedgeString(cX, cY, sd, sd + degrees, r);
          p += '" fill="';
          p += $scope.colors[idxColor];
          p +='" stroke="none" stroke-width="0" />';

          svg.append(jQuery(p));
          sd += degrees;
          idxColor++;
        });

        $element.html($element.html());
      }
    };

数学位在generateWedgeString函数中：

var generateWedgeString = function(startX, startY, startAngle, endAngle, radius){
  var x1 = startX + radius * Math.cos(Math.PI * startAngle/180);
  var y1 = startY + radius * Math.sin(Math.PI * startAngle/180);
  var x2 = startX + radius * Math.cos(Math.PI * endAngle/180);
  var y2 = startY + radius * Math.sin(Math.PI * endAngle/180);

  var pathString = "M"+ startX + "," + startY + " L" + x1 + "," + y1 + " A" + radius + "," + radius + " 0 0,1 " + x2 + "," + y2 + " z";

  return pathString;
};

更新：戴夫的回答有效，但它引入了其他问题。例如，您可以在切片的每1/2之间看到分隔线。另一个是我不能轻易地将鼠标放在事件上。

Answer 1

我相信这是因为当切片大于50％时，你没有在路径字符串中将大弧扫描标志设置为1。

请参阅此MDN documentation并搜索＆＃34; large-arc-sweep-flag＆＃34;。

另外看一下我写的here和here的饼图指令，它演示了如何使用它。

希望这有帮助。

Answer 2

这不是理想的，但是一种hacky工作，是看楔子是否超过总数的一半，如果是这样，将楔子切成两半，并用同样的颜色做两次：

if (i > ($scope.viewDataTotal/2)) {
    tmp = true;
    degrees/=2;
 }
 var p = '<path d="';
 p += generateWedgeString(cX, cY, sd, sd+degrees, r);
 p += '" fill="';
 p += $scope.colors[idxColor];
 p +='" stroke="none" stroke-width="0" />';
 if (tmp) {
     sd = sd + degrees;
     p += '<path d="';
     p += generateWedgeString(cX, cY, sd, sd+degrees, r);
     p += '" fill="';
     p += $scope.colors[idxColor];
     p +='" stroke="none" stroke-width="0" />';
     tmp=false;
  }

http://plnkr.co/edit/vuoN94nYqv4uZh4ygdhx?p=preview

基本饼图显示的问题

2 个答案: