使用php的简单水平条形图

我见过一个facebook应用程序，点击单选按钮可以呈现一个图形

如下所示：

我想知道是否有类似的图形库，通过它我可以在php中生成相同的图形

谢谢

Pankaj看起来很有希望

详细说明6位候选人及其优缺点。它们中的大多数都有相当风格化的渲染。快速浏览一下就可以看出这是非常简单的（从展示的角度来说），也许是你想要的

---

我认为您的请求的不寻常之处在于条形图的水平方向，但是考虑到上面的大多数库看起来都很强大，这应该不会令人头痛

实际上，生成这种图形非常简单-只需使用两个

DIV

s-一个是100%的宽度条，另一个DIV位于第一个DIV中，使背景颜色为您所需的%。您甚至可以在其中包含文本。简单，只是简单的HTML/CSS

更新：

HTML:

---

您可以通过设置跨距背景图像的背景位置来使用CSS来实现

假设条的最大宽度为200像素。此栏的HTML和CSS可能如下所示：

<label>49%</label><span class="bar">Sweaters with leggings</span>

$values = array(
            49 => 'Sweaters with leggings',
            37 => 'Scarves with everything',
            14 => 'Cute knit hats and gloves');

// Find the maximum percentage
$max = max(array_keys($values));

foreach($values as $percentage => $label) {
    // Calculate the position, maximum value gets position 0, smaller values approach 200
    $pos = 200 - ($percentage / $max) * 200;
    // Output the label that shows the percentage
    echo '<label>'.$percentage.'%</label>';
    // Output the span, apply style rule for the background position
    echo '<span class="bar" style="background-position: -'.$pos.'px 0;">'.$label.'</span>';
}

注意到背景图像了吗？为此，您需要一个400px*1px大小的图像，其中最左边的200个像素用您想要的颜色来着色，其余的是白色或透明的。如果将该背景设置为背景位置为

0 0

的范围，则该条将为100%彩色，如果将背景位置设置为

-200px 0

，则该条将为空白。因此，您只需确定在这些极端值中为每个值设置背景位置的位置

首先，您必须找到要表示的最大值。最大值的背景位置为

0 0

，而值0的背景位置为

-200px 0

用于计算和应用背景位置的PHP代码如下所示：

<label>49%</label><span class="bar">Sweaters with leggings</span>

$values = array(
            49 => 'Sweaters with leggings',
            37 => 'Scarves with everything',
            14 => 'Cute knit hats and gloves');

// Find the maximum percentage
$max = max(array_keys($values));

foreach($values as $percentage => $label) {
    // Calculate the position, maximum value gets position 0, smaller values approach 200
    $pos = 200 - ($percentage / $max) * 200;
    // Output the label that shows the percentage
    echo '<label>'.$percentage.'%</label>';
    // Output the span, apply style rule for the background position
    echo '<span class="bar" style="background-position: -'.$pos.'px 0;">'.$label.'</span>';
}

---

就这样，不需要额外的DIV或外部库，只需要两个简单的背景图像。如果你很方便的话，你甚至可以把两张图片合并成一张。请让我知道这是否有帮助，如果我解释的不够清楚，也请告诉我。

嗨，我不想给出背景图像，那么我如何才能达到同样的效果。这样做比较困难，我建议查看到目前为止其他人的回答，可以在那里找到方法。为什么不使用背景图像呢？这是最简单、最干净、最简单的解决方案。请看下面我的方法，不需要背景图像-当您可以只使用

背景颜色

和

宽度

时，这是为了什么。@dusoft，您的方法需要额外的标记，因此这也不是最佳的。当内部div中的文本宽度大于条宽度等时，会出现问题（这些问题可以修复，但需要更多的标记）@Pankaj Khurana，你自己创建这些图像，就像我在我的帖子中解释的那样。@Pankaj你现在应该有足够的信息来完成这项工作。如果给出的答案不符合您的要求，请编辑您的问题，并更具体地说明您在寻找什么。不过，别指望我们会用勺子向您发送代码和/或图形。您好，您能给我一个动态生成css的示例代码吗？有关PHP中的LIB图表，请参见此。还有，检查一下这个。我最喜欢的是根本不使用图表库。嗨，谢谢你的回复。对不起，我不想要更大的图书馆。我不认为您可以看到其图像的应用程序正在使用任何库。我只想要简单的图，就像上图一样

$values = array(
            49 => 'Sweaters with leggings',
            37 => 'Scarves with everything',
            14 => 'Cute knit hats and gloves');

// Find the maximum percentage
$max = max(array_keys($values));

foreach($values as $percentage => $label) {
    // Calculate the position, maximum value gets position 0, smaller values approach 200
    $pos = 200 - ($percentage / $max) * 200;
    // Output the label that shows the percentage
    echo '<label>'.$percentage.'%</label>';
    // Output the span, apply style rule for the background position
    echo '<span class="bar" style="background-position: -'.$pos.'px 0;">'.$label.'</span>';
}

echo '<span class="bar '.($value == $max ? 'bar_max' : '').'" style="background-position: -'.$pos.'px 0;">'.$value.'</span>';

span.bar.bar_max {
    background: url(bar_max_bg.png) 0 0 repeat-y;
}