Php kullanarak basit Yatay Bar Grafik

3 Cevap php

Ben bir radyo düğmesini tıklayarak bir grafik işler hangi bir facebook uygulaması gördük.

Aşağıda gördüğünüz gibi:

alt text

alt text

Ben php aynı grafik oluşturmak hangi aracılığıyla benzer herhangi bir grafik kütüphanesi olup olmadığını bilmek istiyordu.

Teşekkürler,

Pankaj

3 Cevap

Aslında, grafik bu tür üreten oldukça kolaydır - sadece iki DIV s kullanın - bir başka DIV size gereken ilk DIV yapma arka plan renkli% içindedir,% 100 genişlik bar. hatta bu metin içerebilir. kolay, sadece düz HTML / CSS.

GÜNCELLEME:

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; }

Bir yayılma bir arka plan görüntüsü background-position ayarlayarak sadece CSS ile yapabilirsiniz.

Adlı bar maksimum genişliği 200 piksel olduğunu varsayalım. Bu çubuğu için HTML ve CSS şöyle görünebilir:

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

Ve CSS:

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

Arka plan görüntüsü fark? Bunun için, soldaki 200 piksel Eğer barlar olmasını istediğiniz renk, geri kalan beyaz veya şeffaf olması ile renkli bir 400px * 1px boyutlu görüntü, gerekir. Eğer 0 0 arka plan konumu ile yayılma bu arka plan ayarlarsanız, bar% 100 renkli olacak ve -200px 0 arka plan konumunu koyarsanız, bar boş olacaktır. Yani, sadece değerlerin her biri için bu iki uç arasında arka plan konumunu ayarlamak için yeri belirlemek gerekir.

Öncelikle size göstermek istediğiniz değerlerin maksimum bulmak zorunda. En yüksek değer 0 değeri arka konuma sahiptir, oysa 0 0 bir arka konuma sahiptir -200px 0.

Arka plan konumunu hesaplamak ve uygulamak PHP kodu şöyle:

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

Sizin örnekte olduğu gibi en yüksek değer için farklı renkli çubuğunu kullanmak isterseniz, sadece bir arka plan resmi yapmak ve yüksek değere sahip yayılma için bir sınıf uygulayabilirsiniz:

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

Ve CSS:

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

Ve işte bu, DIV ekstra veya harici kütüphaneleri için gerek yok, sadece iki basit bir arka plan görüntüleri. Eğer kullanışlı iseniz, hatta içine bir iki görüntüleri birleştirebilirsiniz. Yeterince net bir şey açıklamak olmasaydı bu da yararlı olduğunu ve eğer lütfen bana bildirin.

PChart umut verici görünüyor.

This blog entry 6 adayları ve onların artıları / eksileri ayrıntıları. Bunların çoğu oldukça stilize render var. Hızlı bir bakış ezComponent's bar chart sizin için ne arıyorsanız, belki de (sunum açısından) oldukça basittir ve düşündürmektedir.

Senin isteğin alışılmadık yönü çubuk grafik horizontal yönelim olduğunu düşünüyorum, ama yukarıdaki kütüphanelerin en güçlü bakmak göz önüne alındığında, bu bir baş ağrısı olmamalıdır.

etiketler