Question

对于初学者，我使用this作为绘制饼图的参考，但是我更改了一些细节。我的目标是将其转换为圆环图而不是饼图，我喜欢使用路径元素。

我从svg元素开始

<svg viewbox="0 0 2 2">

</svg>

然后循环遍历数据数组以绘制每个切片。

int count = 0;

double xCurr = 1;
double yCurr = 0;
double totalPercentage = 0;

string slices = "";

for (int i = 0; i < array.length; i++)
{
    double percent = GetPercentage(array[i], GetTotal());
    totalPercentage += percent;
    int largeArcFlag = percent > 0.5 ? 1 : 0;

    slices += "<g><path fill='" + GetColor(i) + "' d='M" + (xCurr + 1) + "," + (yCurr + 1) + " A1,1,0," + largeArcFlag + ",1," + ((GetXYVals(totalPercentage))[0] + 1) + "," + ((GetXYVals(totalPercentage))[1] + 1) + " L1,1 A0.58,0.58,0," + LargeArcFlag + ",0," + ((GetXYVals(totalPercentage))[0] + 1) + "," + ((GetXYVals(totalPercentage))[1] + 1) + "'></path></g>";

    xCurr = (GetXYVals(totalPercentage))[0];
    yCurr = (GetXYVals(totalPercentage))[1];
}

GetTotal（），GetXYVals（）＆amp; GetPercentage（）方法：

private double GetPercentage(int Value, int Total)
{
    return ((double)Value / Total);
}

private double[] GetXYVals(double percent)
{

    double x = Math.Cos(2 * Math.PI * percent);
    double y = Math.Sin(2 * Math.PI * percent);

    double[] set = { x, y };

    return set;
}

private int GetTotal()
{
    int Total = 0;

    for (int i = 0; i < array.length; i++)
    {
        Total += array[i];
    }

    return Total;
}

使用数据集45, 20, 2, 14, 24

svg最终看起来像

<svg viewBox="0 0 2 2">
    <g>
        <path fill="#1b998b" d="M2,1 A1,1,0,0,1,0.099031132097581,1.43388373911756 L1,1 A0.58,0.58,0,0,0,0.099031132097581,1.43388373911756"></path>
    </g>
    <g>
        <path fill="#fffd82" d="M0.099031132097581,1.43388373911756 A1,1,0,0,1,0.266948128170174,0.319827262229081 L1,1 A0.58,0.58,0,0,0,0.266948128170174,0.319827262229081"></path>
    </g>
    <g>
        <path fill="#ff9b71" d="M0.266948128170174,0.319827262229081 A1,1,0,0,1,0.353400398784201,0.237170428137733 L1,1 A0.58,0.58,0,0,0,0.353400398784201,0.237170428137733"></path>
    </g>
    <g>
        <path fill="#e84855" d="M0.353400398784201,0.237170428137733 A1,1,0,0,1,1.13423326581766,0.00905023823206519 L1,1 A0.58,0.58,0,0,0,1.13423326581766,0.00905023823206519"></path>
    </g>
    <g>
        <path fill="#6b2e98" d="M1.13423326581766,0.00905023823206519 A1,1,0,0,1,2,1 L1,1 A0.58,0.58,0,0,0,2,1"></path>
    </g>
</svg>

我的问题是，你如何计算lineto x y值，因为对于甜甜圈将它们设置为1,1不会起作用，你如何计算第二个arcto x y值？我目前使用的所有其他值是否也适用于圆环图？

Answer 1

从饼图制作甜甜圈图表的一种机智（或愚蠢）方法是绘制一个半径较小的圆圈（背景颜色）（取决于您的甜甜圈必须有多厚）。

在下面的丑陋示例中 - 创建饼图（圆形）图表后 - 我在其上添加了一个白色背景圆圈。（当然这是MS-Paint - 你可以用C＃做得更好。）

如何将此svg路径转换为圆环图中的切片？

1 个答案: