Question

我正在尝试创建一个CSS饼图脚本，每次显示三组结果，每次出现这些结果时，它们都会有所不同。即我在网站上使用不同的饼图，将显示不同的信息。

我想知道我将如何做到这一点，我已经成功编写了PHP，它将为我的3个部分提供旋转开始和每个段的总值，但实际上实现其余的饼干聊天非常困难。

用于确定每个区域大小及其总旋转的PHP：

<?php 

    $T1 = $degree['UFIRST'];
    $T2 = $degree['UUPPER'];
    $T3 = $degree['ULOWER'];

    $TotalTs = $T1 + $T2 + $T3; 
    $PieTotal = 360 / $TotalTs;

    // AREA OF SLICES %'s

    $Slice1 = $T1 * $PieTotal;
    $Slice2 = $T2 * $PieTotal;
    $Slice3 = $T3 * $PieTotal;

    // ROTATION %'s

    $StartSlice1 = 0;
    $StartSlice2 = $Slice1 + $StartSlice1;
    $StartSlice3 = $StartSlice2 + $Slice2;

    ?>

这是我的每个细分的HTML：

<div class="pie" data-start="0" data-value="<?php echo $Slice1 ?>"></div>
<div class="pie" data-start="<?php echo $StartSlice2 ?>" data-value="<?php echo $Slice2 ?>"></div>
<div class="pie" data-start="<?php echo $StartSlice3 ?>" data-value="<?php echo $Slice3 ?>"></div>

所有这些都是正确的并且有效，但我不知道从哪里开始为此编写CSS，因为我不希望它是一个静态饼图。

非常感谢任何想法/帮助。

请不要链接或提及jQuery示例，因为我希望尽可能避免这种情况。

Answer 1

我建议使用Google Charts API，因为它实现起来相对简单，但它需要Java Script。

另一种选择是使用基于圆圈及其扇区的纯CSS图表，可以找到一个例子here

Answer 2

最好的图表是jquery如果你想自己写它你应该发布至少你到目前为止。如果你想它们是动态你想使用js，即使是静态你还需要使用js .Bcs通过php手动输入css值只是meh。

具有不同PHP值的CSS饼图

2 个答案: