标签遵循圆形jQuery和CSS

Question

我希望百分比标签遵循圆形图案（橙色）：

请参阅演示：http://codepen.io/anon/pen/dsfpb（更改html元素的data-attribute以查看更改）

目前，我正在控制标签的位置，其中width用于裁剪蓝色圆圈的元素。我有这段代码：

if (percentage >= 0 && percentage <= 25)
  $(this).css('width', 65 + '%');
if (percentage > 25 && percentage <= 50)
  $(this).css('width', 100 + '%');
if (percentage > 50 && percentage <= 75)
  $(this).css('width', 100 + '%');
if (percentage > 75 && percentage <= 95)
  $(this).css('width', 65 + '%');
if (percentage > 95 && percentage <= 100)
  $(this).css('width', 45 + '%');

有没有办法改善这个？有些百分比看起来并不好（例如'尝试'20％'，'80％'，'0％'）。也许简化它？我尝试使用像这样的循环（不完整）：

var j = 100;
while (i--) {
  if (percentage <= 50) {
    j = j - 2;
    if (j <= 0)
      j = 0;
  }
}

有什么想法吗？谢谢！

Answer 1

根据与圆心相距水平和垂直的距离定位数字。当然，实际的hor / ver数字需要转换为相对于圆圈中心所包含的元素（）的值。将需要对相对于实际圆的数字进行一些位置放置调整，因为例如，圆的右侧，数字将相对于其左侧角定位。这需要针对位于圆圈左侧的数字进行校正，否则，它们将与圆重叠。

小型flash电影可以让任务变得更轻松。

不是定位数字，而是可以简单地将显示的数字限制为数十（0,10,20,30 ......）并将数字设为透明的png（或gif），其中png的整体大小为包含圆的元素的大小，并用作背景图像。这样，您只需在需要时调用图像，而不必担心放置。