基本饼图显示的问题答案

【问题标题】：Issues with basic pie chart display基本饼图显示的问题
【发布时间】：2015-06-02 20:31:47
【问题描述】：

Example 在 Plunker 上。

我有21个问题，~~当馅饼中有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 切片之间的分隔线。另一个是我不能轻易地将鼠标悬停在事件上。

【问题讨论】：

你为什么用var degrees = i / $scope.viewDataTotal * 359;而不是var degrees = i / $scope.viewDataTotal * 360;？将该数字更改为 360 可以解决 sliver 问题...
此外，该错误比仅 如果饼图中的切片少于 3 个，它看起来很不稳定。。如果你有一个大于 50% 的切片，它实际上看起来 wonky。您可以通过尝试 [1,1] 或 [2,2] 来验证这一点
@StephenH - 太棒了。我使用 359 因为我认为 0 到 356 是 360 度。我已经更新了代码以使用 360 并且小条问题消失了。只剩下一个不稳定的问题了。

标签： javascript angularjs svg pie-chart

【解决方案1】：

我相信这是因为当切片大于 50% 时，您没有在路径字符串中将 large-arc-sweep 标志设置为 1。

请查看此MDN documentation 并搜索“large-arc-sweep-flag”。

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

这并不理想，而是一种变通的解决方法，即查看楔形是否超过总数的一半，如果是，则将楔形切成两半，并用相同的颜色重复两次：

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

【讨论】：