Question

我正在创建一个非常简单的动态条形图（CSS / PHP），基本上我需要显示的是用户联系人的总数，其中每个条形宽度是px中联系人的数量（每个联系人= 1像素）非常琐碎没有？

 _______.____________________600px
|       |                        |
| mario | ===== (54) px          |
| julie | ========= (65) px      |
| john  | === (40) px            |
| mary  | ============= (70) px  |
|_______|________________________|
        0%   30%   50%   80%   100%

现在，我的问题是图形容器应该是固定宽度，例如600px，那么，如果其中一个有超过600个联系人会发生什么？是的，我知道，它搞砸了。 ; - ）

那么，如何以相应的总比例方式转换为百分比，并且永远不会到达图表的末尾？

提前谢谢。

Answer 1

求和所有值（54 + 65 + 40 +70 = 229），计算每个值的百分比（54/229 = 23.58％），然后将该百分比应用于600px（600 * .2358 = 141.48）。然后，您可以将该值设置为条形的宽度（因此第一个条形将为141px）。

在代码中它可能看起来像这样（尽管你可能会在循环中计算这些值）：

$total = 229;
$bar1 = 54;
$bar1Length = round(600 * ($bar1/$total)); // 141

Answer 2

像

这样的东西

current_width = current_value *（max_width / max_value）

其中max_width = 600px。

请注意，这只是伪代码。我不能写下具体的内容，因为你的问题没有提供任何细节。

Answer 3

如果条形的宽度是totalWidth，你可以这样做（在C伪代码中，我不知道PHP）：

int maxContacts = 0;

for (int i = 0; i < numberOfUsers; i++)
{
    if (users[i].numberOfContacts > maxContacts)
        maxContacts = users[i].numberOfContacts;
}

// now you have the max number of contacts

for (int i = 0; i < numberOfUsers; i++)
{
    widthPercent = users[i].numberOfContacts / maxContacts; // this is the percentage
    display_width_for_this_user = totalWidth * widthPercent; // gives the relative width
}

数学 - 动态图表，保持约束比例

3 个答案: