0

我正在尝试创建一个 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 示例，因为我希望尽可能避免这种情况。

4

2 回答 2

0

我推荐使用 Google Charts API，因为它实现起来相对简单，但它需要 Java 脚本。

另一种选择是使用基于圆圈及其扇区的纯 CSS 图表，可以在此处找到示例

于 2013-06-16T16:03:14.650 回答
-1

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

于 2013-06-16T16:05:46.610 回答