Share
L’équipe Truematter a récemment été chargée de créer une application Web amusante et sexy qui présente des données numériques de manière attrayante. Après avoir rassemblé nos idées, nous avons créé un graphique à barres qui répond de manière interactive aux commentaires des utilisateurs sans, Dieu nous en préserve, sans recharger aucune page. Nous sommes très heureux de pouvoir partager cela avec la communauté du codage. Il y a quelques astuces CSS impliquées, une dose de jQuery et de la magie graphique, mais lorsque nous aurons terminé ce didacticiel, nous disposerons d'un graphique superbement interactif que vous pourrez personnaliser à votre guise..
Les éléments graphiques et la manière dont ces éléments sont découpés et compilés sont ce qui donne vraiment à ce graphique un facteur wow. Ce projet ne nécessite que trois éléments graphiques, mais, comme nous créons essentiellement une illusion à l'aide de CSS et d'images, ces graphiques doivent être conçus avec précision..
La carte elle-même est composée de trois fichiers PNG séparés superposés en CSS, dont deux stationnaires (les parties du boîtier «vitreuses»), et l’un animé par jQuery (la partie verte de la barre). le milieu).
La pièce d’arrière-plan est composée du bas du graphique (que nous ne voyons que lorsque la barre est vide à 0%), des panneaux arrière gauche et arrière droit. Sur cette couche la plus basse, nous incluons toutes les faces du corps du graphe qui doivent devenir «couvertes» lorsque le graphe est plein ou partiellement plein. C'est la couche qui donne vraiment à l'illusion 3D une certaine profondeur.
La partie centrale animée de ce graphique est simple à créer. Nous vous suggérons d’utiliser des fonctions d’extrusion 3D très basiques dans Illustrator. Vous pouvez également dessiner une forme à trois panneaux dans Photoshop et l’appeler un jour. Colorez votre graphique de façon très brillante, en le sursaturant autant que possible. Pourquoi? Parce que dans le tableau final, il sera affiché sous un boîtier semi-transparent, de sorte que la couleur sera atténuée par le calque qui le recouvre.
Il est extrêmement important que les bords supérieur et inférieur de cette pièce restent transparents. Veillez donc à l'enregistrer au format PNG..
Il est tout aussi important de faire en sorte que cette pièce ait exactement la même hauteur que les pièces du boîtier graphique. Dans nos images, la couche intermédiaire semble plus courte que le boîtier. Lorsque vous créez votre pièce centrale, faites en sorte que la barre centrale soit aussi haute que le boîtier. Si vous le rendez trop court, votre graphique ne pourra jamais se remplir correctement à 100%. Si vous le rendez trop grand, le graphique peut sortir du conteneur de boîtier lorsqu'il est animé.
Nous en arrivons à la véritable supercherie visuelle, qui se produit tout au long du bord inférieur de cette troisième et dernière pièce. Tandis que les bords supérieurs gauche et droit conservent la transparence, les bords inférieurs gauche et droit doivent être remplis de la même couleur que l’arrière-plan sur lequel le graphique sera assis..
Par exemple, si l'arrière-plan de votre site Web est en noir, les deux bords inférieurs de cette pièce doivent être remplis en noir uni. Dans notre exemple ci-dessus, l’arrière-plan du site est blanc, nous avons donc rempli les bords inférieurs en blanc. Cette zone de couleur unie cache efficacement tout débordement du graphique à barres central (élément graphique 2). Sans cette pièce et son bord inférieur opaque, nous perdons totalement l'effet 3D. Voici le graphique sans cela:
D'accord! Tous nos éléments graphiques sont terminés et nous sommes prêts à passer directement au code. Le HTML lui-même est assez simple. Vous consultez quelques champs de base de sélection de formulaire et quelques divs pour le graphique à barres..
Tout d'abord, regardons le code complet, puis nous le prendrons pièce par pièce (sans jeu de mots!). Notez que les éléments div du graphique à barres sont inclus dans la balise de formulaire.
Puisque ce graphique dépend de javascript, nous vérifions d'abord qu'il est activé dans le navigateur:
Nous commençons maintenant le formulaire. Pour les besoins de cette démo, nous avons utilisé deux simples listes déroulantes, mais vous pouvez tout aussi facilement modifier ce code pour utiliser des champs de texte, des boutons radio ou tout autre type d'entrée. Le select sur le changement attribut est donné la fonction "Calculate ();", que nous couvrirons dans la section jQuery ci-dessous.
Combien d'argent voulez-vous contribuer à l'épargne chaque mois? Quel est votre revenu mensuel?
Et enfin, inclus dans la balise de formulaire, les éléments graphiques:
Pourcentage de salaire mensuel économisé
25%50%75%100%
#formcontainer float: left; #grapharea position: relative; float: gauche; marge gauche: 4em; #graphcontainer position: relative; largeur: 262px; hauteur: 430px; débordement caché; #graphbackground, #graphforeground position: absolute; #graphbar position: absolute; en haut: 430 pixels; .graphlabel position: absolute; à gauche: 270 pixels; # p25 top: 365px; # p50 top: 278px; # p75 top: 191px; # p100 top: 105px;
La chose la plus cruciale qui devrait attirer votre attention ici est le #graphbar div. Notez que notre #graphbar div commence à 430px - la hauteur totale du graphique à barres. Cette déclaration de hauteur est le nombre manipulé via jQuery pour animer le graphique. Si vous avez créé vos propres éléments graphiques dont la hauteur est supérieure ou inférieure à 430 pixels, vous devrez ajuster ce nombre en fonction de vos propres graphiques..
De même, vous devrez également ajuster le px de # p25, # p50, # p75 et # p100. Celles-ci Haut les déclarations définissent la position des marqueurs 25%, 50%, 75% et 100% sur le côté droit du graphique.
Regardez aussi de près les styles #graphcontainer:
#graphcontainer position: relative; largeur: 262px; hauteur: 430px; débordement caché;
Mettre un position: relative;La déclaration sur cet emballage externe nous permet d'utiliser le positionnement absolu sur les trois divs dans #graphcontainer, afin que nous puissions les empiler les uns sur les autres en utilisant des décalages CSS. Il est également essentiel de définir une hauteur et une largeur - la hauteur et la largeur de cette div doit correspondre parfaitement à la hauteur et à la largeur des éléments graphiques 1 et 3. Et débordement caché; masque le graphique animé, élément 2, lorsqu'il dépasse des limites de la division d'habillage.
Ah, maintenant pour le jQuery! Il relie toutes les pièces et ajoute de l'animation. Un rapide aperçu de l'intégralité de jQuery:
Commencez par créer une constante à utiliser dans les calculs. ZEROPOS est la valeur en pixels de l'endroit où l'élément graphique central (graphique 2, la pièce mobile) doit être positionné pour représenter 0%.
var ZEROPOS = 355;
Ensuite, recherchez les valeurs sélectionnées par l'utilisateur à l'aide des cases à cocher - salaire et épargne. Puis calcule la valeur en pourcentage - pourcentage.
Accentsconagua
var salaire = $ ("# revenu"). val (); var épargne = $ ("# épargne"). val (); var pourcentage = épargne / salaire; L'étape suivante consiste en une vérification de validation afin de s'assurer que l'utilisateur a bien sélectionné les valeurs dans les deux zones de sélection. S'ils ont, nous continuons avec le script. Sinon, nous ne faisons rien.
if (parseInt (épargne)> 0 && parseInt (salaire)> 0)
Si l'utilisateur a entré les valeurs appropriées, nous nous assurons qu'il a bien sélectionné un salaire supérieur au montant qu'il souhaite contribuer à l'épargne. S'ils ont, nous continuons avec le script. Sinon, nous invitons l'utilisateur à modifier ses sélections.
if (parseInt (épargne)> parseInt (salaire)) alerte ("Vous ne pouvez pas économiser plus que ce que vous avez gagné - veuillez modifier vos sélections en conséquence."); Nous en sommes enfin à la partie essentielle du script: calculer la position dans laquelle nous allons déplacer la barre graphique, puis activer la fonctionnalité d’animation jQuery pour que cela se produise..
val = (pourcentage == 0)? ZEROPOS: ZEROPOS - (pourcentage * de ZEROPOS); $ ("# barre graphique"). animate (top: val + "px", 1500); Donc, en calculant la valeur pour la position de la barre graphique - val - d’abord, déterminez si le pourcentage est égal à zéro. Si tel est le cas, définissez une valeur égale à la constante ZEROPOS. Sinon, calculez la nouvelle position de barre en soustrayant la valeur de pourcentage multipliée par la valeur de position zéro de la valeur de position zéro. Cette formule est utilisée parce que nous animons la barre de la position zéro en bas du graphique vers le haut..
Une fois la valeur de pixel calculée, nous savons où nous nous dirigeons. Appelez simplement la méthode animate dans jQuery sur l’objet graphbar en transmettant la nouvelle valeur CSS pour la position la plus haute avec un taux d’animation de 1500 (la vitesse de l’animation en millisecondes). Ensuite, jQuery fait la magie pour nous et déplace la barre dans le graphique en conséquence. Alto!
Nous espérons que vous avez apprécié ce tutoriel!
