Simple Graphique à barres Horizontales à l'aide de php

J'ai vu un facebook de l'application dans laquelle cliquant sur un bouton radio rend un graphique.

Comme vous pouvez le voir ci-dessous:

Simple Graphique à barres Horizontales à l'aide de php

Simple Graphique à barres Horizontales à l'aide de php

Je voulais savoir si il y a un graphique similaire de la bibliothèque à travers lequel je peux générer le même graphique en php.

Merci,

Pankaj

InformationsquelleAutor Pankaj Khurana | 2009-12-28
  1. 4

    en fait, la génération de ce type de graphique est assez facile - il suffit d'utiliser deux DIVs - one est un 100% de la largeur de la barre, un autre DIV dans le premier DIV faisant fond coloré % vous avez besoin. vous pouvez même inclure le texte dans que. facile, il suffit de HTML/CSS.

    Mise à JOUR:

    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; }
    • Salut, Pouvez-vous svp me donner un exemple de code pour générer le css dynamiquement?
    InformationsquelleAutor dusoft
  2. 1

    Vous pouvez le faire avec juste CSS en définissant le background-position d'une image d'arrière-plan d'une durée de.

    Disons que la largeur maximale de la barre est de 200 pixels. Le HTML et le CSS pour cette barre pourrait ressembler à quelque chose comme ceci:

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

    Et CSS:

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

    Avis de l'image de fond? Pour cela, vous avez besoin d'un 400px * 1px de la taille de l'image, où le plus à gauche 200 pixels est coloré avec la couleur que vous voulez les barres, le reste étant blanc ou transparent. Si vous définissez cet arrière-plan de la durée, avec le fond, la position de 0 0, la barre sera de 100% de couleur, et si vous mettez le fond en position de -200px 0, le bar est vide. Ainsi, vous aurez juste à déterminer où mettre votre fond de position entre ces deux extrêmes pour chacun de vos valeurs.

    D'abord, vous devez trouver la valeur maximale des valeurs que vous voulez représenter. La valeur maximale a un fond de 0 0, alors que la valeur de 0 a fond la position de -200px 0.

    Le code PHP pour calculer et appliquer le fond de position qui va comme ceci:

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

    Si vous souhaitez utiliser une couleur différente de la barre pour la valeur la plus élevée que dans votre exemple, vous pouvez faire une autre image de fond et appliquer une classe à la plage avec la valeur la plus élevée:

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

    Et en CSS:

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

    Et c'est tout, pas besoin d'un surplus de DIV ou de bibliothèques externes, à seulement deux simples images d'arrière-plan. Si vous êtes à portée de main, vous pouvez même combiner les deux images en une seule. S'il vous plaît laissez-moi savoir si cela est utile, et si je n'ai pas expliquer quelque chose d'assez clair.

    • Salut, je ne veux pas donner l'image d'arrière-plan alors comment puis-je accomplir le même effet.
    • Il est alors plus difficile à faire et je vous suggère de regarder dans ce que les autres ont répondu jusqu'à présent, la méthode peut être trouvé là. Et pourquoi ne voulez-vous utiliser l'image de fond? C'est la plus simple, la plus propre et la solution la plus simple disponible.
    • regarder ma méthode ci-dessous, aucune image de fond est nécessaire - ce que, quand vous pouvez avoir tout background-color et width utilisé.
    • ok, alors d'où je peux obtenir bar_bg.png et bar_max_bg.png?
    • votre méthode nécessite un surcroît de balisage, ce qui n'est pas optimal non plus. Les problèmes surviennent lorsque le texte à l'intérieur du div est plus large que la largeur de la barre etc (il peut être fixe, mais nécessite encore plus de balisage). @Pankaj Khurana, vous créez les images vous-même comme je l'ai expliqué dans mon post.
    • Vous devriez avoir suffisamment d'informations par maintenant pour obtenir ce travail. Si les réponses données ne répondent pas à vos exigences, veuillez modifier votre question et être plus précis sur ce que vous recherchez. Ne vous attendez pas de nous spoonfeed vous code et/ou des graphiques bien.

    InformationsquelleAutor Tatu Ulmanen
  3. 0

    PChart semble prometteur.

    Cette entrée de blog détails 6 candidats et de leurs avantages/inconvénients. La plupart d'entre eux ont tout à fait stylisé de rendu. Un rapide coup d'œil suggère que ezComponent du graphique à barres est assez simple (en termes de présentation) et peut-être ce que vous cherchez.

    Je pense que l'aspect inhabituel de votre demande est de la horizontale orientation de la barre graphique, mais étant donné que la plupart des bibliothèques ci-dessus look puissant, qui ne devrait pas être un casse-tête.

    InformationsquelleAutor Brian Agnew