Salut à tous, amateurs de graphiques ! Vous en avez assez de créer toujours les mêmes graphiques ennuyeux qui semblent tout droit sortis d'un manuel scolaire ? Pas de panique, mes amis, car aujourd'hui nous allons vous apprendre à créer des graphiques avec un style redoutable : les dégradés !
Les dégradés, ce sont les stars du monde des graphiques. Ils apportent profondeur, relief et une touche de couleur qui peut transformer vos graphiques d’ennuyeux à spectaculaires. Et en plus, une fois qu’on sait comment faire, ils sont super faciles à créer.
Dans cet article, nous allons vous montrer étape par étape comment créer des diagrammes avec des dégradés qui feront 'oh' et 'ah' votre audience. Que vous créiez des diagrammes pour le travail, l'école ou simplement pour le plaisir, cette technique fera passer vos diagrammes au niveau supérieur.
Alors, enfilez votre casquette de créateur de graphiques, et lançons-nous dans cette aventure de création de graphiques !
Remplissages en dégradé dans l’éditeur Image Charts
Vous pouvez appliquer un ou plusieurs remplissages en dégradé aux zones ou aux arrière-plans du graphique (pour les camemberts, uniquement les arrière-plans). Les remplissages en dégradé sont des transitions d'une couleur à une autre. Examinons la syntaxe dont vous aurez besoin pour créer de superbes graphes en dégradé sur Image Charts :
Syntaxe :
chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>,...,<color_n>,<color_centerpoint_n>
- <fill_type> est soit bg remplissage d'arrière-plan, c remplissage de la zone du graphique (actuellement identique à bg, bg a la priorité sur c), ou b<index> remplissages en dégradé (valables pour les graphiques à barres, à lignes, circulaires et à bulles).
- lg est un dégradé linéaire.
- <angle> est le degré du dégradé (angle). 0 correspond à l'horizontale et 90 à la verticale.
- <color> dans format hexadécimal RRGGBB[AA].
- <color_centerpoint> est le point d'ancrage de la couleur. La couleur commencera à s'estomper à partir de ce point à mesure qu'elle se rapproche d'un autre point d'ancrage. La plage de valeurs va de 0.0 (bord inférieur ou gauche) à 1.0 (bord supérieur ou droit), inclinée selon l'angle spécifié par <angle>.
- ps<index>-<sliceIndex> (valable uniquement pour les graphiques circulaires, en aires polaires et à bulles) est identique à b<index> mais vous permet de spécifier un dégradé par part de camembert. Pour les graphiques circulaires, b<index> est prioritaire sur ps<index>-<sliceIndex> ; les deux ne peuvent pas être combinés, cela n'aurait guère de sens.
Si tous ces aspects techniques vous ont dépassé, pas de panique. Nous allons vous guider tout au long du processus à l'aide de quelques exemples.
Dégradé dans un graphique à barres
Voyons cela avec un exemple. Rendez-vous dans l’éditeur d’image et choisissez un graphique à barres empilées verticalement. Renseignez vos données, puis utilisez ces paramètres pour le dégradé :
chf=b0,lg,90, 00C1B5,1, 8D80EC,0.5
Cela définit un dégradé linéaire lg à partir de 90 degrés (de haut en bas. Si vous sélectionnez un axe horizontal et souhaitez aller de gauche à droite, utilisez 0 au lieu de 90).
La couleur va de #00C1B5 (bleu œuf de merle) à #8D80EC (lilas). Vous pouvez modifier les valeurs après les codes hexadécimaux (00C1B5,1, 8D80EC,0.5) pour définir quelle couleur afficher, où et dans quelle proportion.
le résultat ?
Dégradé en arrière-plan
Imaginons que vous vouliez pimenter votre graphique sparkline, qui naturellement n'a ni légende ni aucun autre élément prenant de la place. Alors, pourquoi ne pas créer un dégradé pour votre arrière-plan ?
Là encore, accédez à l'éditeur d'images et choisissez un graphique sparkline dans la galerie. Ajoutez toutes les données pertinentes. Pour le dégradé, utilisez ensuite ces spécifications :
chf= c,lg,0,CEDCFF,0.8,8D80EC,0
Cela définit un dégradé linéaire lg à 0 degré (pour gauche-droite). La couleur change de #8D80EC (lilas) à gauche à #CEDCFF (violet bleuté pâle) à droite.
Et à quoi cela ressemble-t-il ? Jetez un œil !
Amusant, non ?
Vous pouvez faire ÉNORMÉMENT de choses avec les dégradés. Amusez-vous avec l'arrière-plan ou la zone du graphique pour les graphiques classiques, ou créez un tout nouveau diagramme à barres (astuce : graphique en barre de progression)!
Maintenant que nous sommes lancés, explorons…
Remplissages en dégradé dans l’automatisation no-code
Imaginons que vous souhaitiez envoyer chaque mois l’avancement d’un projet à votre équipe pour qu’elle sache où elle en est. Pour cela,
- connectez vos données source (il peut s'agir d'une feuille de calcul, d'une pièce jointe d'un e-mail, ou même d'un message Slack !) pour définir votre déclencheur, puis
- connectez-vous à Image Charts et ajoutez les détails (nous y reviendrons dans un instant), puis
- connectez-vous à votre canal de destination.
Voilà ! C'est aussi simple que 1, 2, 3 !
Pour les détails, renseignez toutes les informations pertinentes dans les champs fournis.
Mais pour obtenir un joli dégradé sur la barre, il y a deux étapes à suivre :
Tout d'abord, dans l'option de couleur de série, ajoutez le code hexadécimal de la couleur neutre qui représentera la partie « non terminée » de la barre de progression. Pour cet exemple, nous utilisons un gris bleuté clair #D7DAE1.
Ensuite, pour obtenir un joli dégradé sur la barre, vous devez utiliser des personnalisations avancées. La première consiste à ajuster correctement la barre de progression en définissant des marges négatives avec ceci :
chma=-10,0,0,-10
Ensuite, pour créer un dégradé linéaire, ajoutez les détails chf comme décrit précédemment. Assurez-vous d'utiliser le signe esperluette « & » pour combiner chma et chf. Voici à quoi cela ressemblerait dans Zapier :
le résultat, demandez-vous ?
Voilà !
Plutôt sympa, non ?
Créez maintenant vos propres dégradés sur le éditeur Image Charts gratuit!
