Question

我正在尝试使用SVG和一些技巧来构建饼图。

.pie {
  border-radius: 50%;
  transform: rotate(-90deg);
}
.pie .background {
  fill: none;
  stroke: #eaeaea;
  stroke-width: 3;
  stroke-dasharray: 100 100;
}
.pie .chart {
  fill: none;
  stroke: #f73319;
  stroke-width: 3;
  stroke-dasharray: 0 100;
  animation: 2s linear slice;
  animation-fill-mode: forwards
}
@keyframes slice {
  to {
    stroke-dasharray: 75 100;
  }
}

<svg viewBox="0 0 64 64" class="pie">
  <circle class="background" r="25%" cx="50%" cy="50%"></circle>
  <circle class="chart" r="25%" cx="50%" cy="50%"></circle>
</svg>

JSFiddle

代码非常简单：我使用stroke-dasharray来制作一个覆盖整个圆圈的破折号，并且可以调整以制作切片。但是，出于某种原因，没有一个浏览器“关闭”该圈。

如果要调整饼图%，可以更改

中的第一个数字

stroke-dasharray: 75 100;

第二个数字指定不同破折号之间的差距。它在100的原因是因为它等于圆的半径：

  radius * width * 2 * pi
=   0.25 *    64 * 2 * pi
= 100.53

Answer 1

你的圆圈在一个viewBox =“0 0 64 64”中是r =“25％”，这意味着它的半径为16（64％的25％）

圆的周长是2 * PI * r，其中对于r = 16是100.53，即略大于100，因此第一个dasharray值100不完成圆。只需将第一个值设为100.53，它就会一直画出来。

DECLARE @tblName TABLE (i INT, j DECIMAL(6,2));
INSERT @tblName VALUES (1, 4619.71),(1, 4619.84),(1, 4619.97),(1, 4620.11),(1, 4620.11),(1, 4620.11),(0, 4620.11)
,(0, 4620.24),(0, 4620.24),(0, 4620.24),(1, 4620.24),(1, 4620.24),(1, 4620.24),(1, 4620.37),(0, 4620.37), (1, 4620.88);


WITH CTE AS (
    SELECT i, j, ROW_NUMBER() OVER (PARTITION BY RN1 - RN2 ORDER BY j) RN3, RN1
    FROM (
        SELECT i, j
             , ROW_NUMBER() OVER (ORDER BY j) RN1
             , ROW_NUMBER() OVER (PARTITION BY i ORDER BY j) RN2
        FROM @tblName) T)
SELECT C1.i, C1.j
     , C1.j - X.j [IndividualDifference]
     , SUM(ISNULL(C1.j - X.j, 0)) OVER (PARTITION BY i) [SumDifference]
FROM CTE C1
OUTER APPLY (
    SELECT MAX(j)
    FROM CTE
    WHERE RN3 = 1
    AND RN1 < C1.RN1) X(j)
WHERE C1.RN3 = 1  
ORDER BY C1.j;

.pie{
            border-radius:50%;
            transform: rotate(-90deg);
        }
        .pie .background{
            fill:none;
            stroke:#eaeaea;
            stroke-width:3;
            stroke-dasharray:100.53 100;
           
        }
         .pie .chart{
            fill:none;
            stroke:#f73319;
            stroke-width:3;
            stroke-dasharray:0 100;
            animation: 2s linear slice ;
            animation-fill-mode:forwards
        }
        @keyframes slice{
            to{stroke-dasharray:100.53 100;}
        }

SVG圈有差距

1 个答案: