使用php的简单水平条形图

Question

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

如下所示：

 

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

谢谢，

的Pankaj

Answer 1

实际上，生成这种图表非常简单 - 只需使用两个DIV s - 一个是100％宽度条，另一个DIV就在第一个DIV中，使背景颜色为％。你甚至可以在其中包含文字。简单，只需简单的HTML / CSS。

更新：

HTML：

<div class="bar">
    <div class="percentage" style="width:66%">This is 66% wide div</div>
</div>

CSS：

.bar { width: 99%; border: 1px solid #000; }
.percentage { background: #000; }

Answer 2

您可以通过设置跨度的背景图像的背景位置来仅使用CSS。

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

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

和CSS：

span.bar {
    background: url(bar_bg.png) 0 0 repeat-y;
    display: block;
    width: 200px;
    line-height: 20px;
}

注意背景图片？为此，您需要一个400px * 1px大小的图像，其中最左边的200个像素用您想要条形的颜色着色，其余为白色或透明。如果将此背景设置为背景位置为0 0的范围，则条形图将为100％着色，如果您将背景位置设为-200px 0，则条形图将为空白。因此，您只需确定在每个值的极端值中设置背景位置的位置。

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

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

$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>';

在CSS中：

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

就是这样，不需要额外的DIV或外部库，只需要两个简单的背景图像。如果你很方便，你甚至可以将两个图像合二为一。如果这有用，请告诉我，如果我没有解释清楚的话，请告诉我。

Answer 3

PChart看起来很有希望。

This blog entry详细列出了6位候选人及其优缺点。他们中的大多数都有相当风格化的渲染。快速浏览表明ezComponent's bar chart非常简单（就演示而言）以及您正在寻找的内容。

我认为您的请求的不寻常方面是条形图的水平方向，但鉴于上述大多数库看起来很强大，这应该不会令人头疼。