PHP CSS 圆锥梯度

问题描述

我很难找到有关此问题的答案，因此这里有问题。

我想用我的数据库中的数据做一个仪表板。我开始很简单，一个带有女性/男性分布的饼图。随意告诉我如何使代码更好，感觉真的很混乱......

<?PHP
require_once 'database.PHP';
include 'head.PHP';
include 'nav.PHP';

global $conn;
$query = "SELECT COUNT(gender) FROM persons WHERE gender = 'female'";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->fetchColumn();

$quantityFemales = $result;

$query = "SELECT COUNT(gender) FROM persons WHERE gender= 'male'";
$stmt = $conn->prepare($query);
$stmt->execute();
$result = $stmt->fetchColumn();

$quantityMales = $result;

// style for pie-chart div
$genderStyle = "width: 300px;
height: 300px;
background: radial-gradient(grey 40%,transparent 41%),conic-gradient(#e1cbe4 0% " . $quantityFemales / ($quantityFemales + $quantityMales) * 100 . "%,#cde1b9 " . $quantityFemales / ($quantityFemales + $quantityMales) * 100 . "% 100%);
border-radius: 50%;
display: inline-block;";

?>

然后我只是绘制饼图：

<div style="<?PHP echo $genderStyle ?>"></div>

效果很好。

接下来我考虑做民族，但意识到一些潜在的问题。

我可以通过以下方式获得数据库中国籍的出现次数：

SELECT nationality,COUNT(nationality) FROM persons GROUP BY nationality

可能和我对性别所做的一样。

我的想法是，当我在数据库中获得一个新的国籍时，圆锥梯度需要另一个输入。所以在conic-gradient中输入的数量与数据库中的民族数量有关。

我想我可以做一个循环来设置 $nationalityStyle 中圆锥梯度的输入数量。

但这是最好的方法吗？在我开始做之前想要一些输入，如果这是一个坏主意，那就浪费时间。也许它并不像我想象的那么难 xD

也许对此有完全不同的方法？

与四个国家一样，conic-gradient 将是：

conic-gradient(red 0deg,orange 90deg,yellow 180deg,blue 360deg);

但有五个：

conic-gradient(red 0deg,green 270deg,blue 360deg);

希望有人理解我(:

干杯！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）