如何将css间隙添加到圆环图css的圆段

Posted 2023-03-06

【中文标题】如何将css间隙添加到圆环图css的圆段

【英文标题】：How to add css gap to circle segments of a donut chart css

【发布时间】：2020-11-11 07:56:16

【问题描述】：

我在 stackblitz 上有这个甜甜圈字符 =

https://stackblitz.com/edit/angular-material-dtnpcd?file=app%2Fapp.component.ts

我正在尝试在此 svg 圆环图的每个圆段之间添加一个间隙，以便更容易查看图表的不同部分以方便访问。

任何帮助将不胜感激

以下是预期与当前的屏幕截图：

【参考方案1】：

我只是通过使用 svg 属性偶然发现了一个解决方案，并认为它可能会对您有所帮助。修复很简单，只需更改以下行。

[attr.stroke-dasharray]="
    item.utilization + ' ' + (100 - item.utilization)
"

[attr.stroke-dasharray]="
    item.utilization - 1 + ' ' + (100 - item.utilization + 1)
"

_{我试图分叉你的 stackblitz 以链接一个工作版本，但它一直在旋转}

编辑：

好的，考虑到 dash-array 和 -offset 的工作原理，第一种方法没有多大意义。

第一个问题是你减去一个固定的百分比。这仅在百分比（item.utilization）大于该数量时才有效。这也会扭曲图表的视觉表示，因为您不再代表实际百分比。

更好的方法是将图表基于 100 + x 百分比（x 是图表中元素的数量），即 105。这为图表提供了更多空白空间。然后，您可以使用 dash-offset 根据它们的索引来移动各个项目。

[attr.stroke-dasharray]="(item.utilization) + ' ' + (105 -  item.utilization)"
[attr.stroke-dashoffset]="
    i === 0 ? 25 : (105 - item?.runningTotal + 25 - i)
"

使用 105 会留下很大的差距。为了缩小这个差距，您可以使用102.5 和i / 2。请记住，您需要根据图表中元素的数量来增加百分比，因为每个元素占用所提供额外空间的 1%（分别为 0.5%）。

Edit2：您可以使用donutData.length 添加更多空间。

[attr.stroke-dasharray]="(item.utilization) + ' ' + (100 + donutData?.length / 2 -  item.utilization)"
[attr.stroke-dashoffset]="
    i === 0 ? 25 : (100 + donutData?.length / 2 - item?.runningTotal + 25 - i/2)
"

【讨论】：

0.5 的差距看起来更好

太棒了！这太完美了！

当我将此应用于不同的数据集时，它看起来不正确。 stackblitz.com/edit/…

@Crystal 真可惜！ - 问题是，百分比值太小，减去 0.5 时会变成负数。您可以将 dash-array 和 dash-offset 中的 100 更改为 105 以腾出更多空间，并使用偏移量根据其索引移动各个元素。我会在一秒钟内更新答案。

@Crystal 顺便说一句，这两个 25 不是必需的，它们只会旋转您的图表。不知道是不是故意的。