Que vous soyez un chercheur qui compile des données sur une élection locale ou un enseignant qui partage des données sur la population de la faune locale avec votre classe, il n’y a pas de meilleur substitut que les diagrammes et graphiques. Ces outils visuels transforment des données ennuyeuses et apparemment sans valeur en informations faciles à digérer.
Ce qui est génial, c’est que vous n’avez pas à vous soucier de la manipulation d’un logiciel complexe de création de graphiques, puisque les graphiques et diagrammes WordPress peuvent être réalisés avec de simples extensions. Par conséquent, nous sommes ici pour vous présenter les meilleures de ces extensions, et nous vous expliquerons également comment créer de magnifiques graphiques et diagrammes WordPress.
Avantages de faire des diagrammes et des graphiques dans WordPress
Vous vous demandez peut-être pourquoi vous ne pouvez pas simplement développer un graphique ou un graphique en Excel, par exemple, puis en faire une capture d’écran pour le placer dans votre blog. Parfois cette méthode fonctionne bien, mais d’autres fois c’est un énorme gaspillage. La principale raison pour laquelle vous utiliseriez Excel, ou un autre programme de création de graphiques, est lorsque vous avez besoin d’une fonctionnalité avancée qui n’est pas disponible via une extension WordPress.
Sinon, voici les avantages de faire des diagrammes et graphiques WordPress avec des extensions :
- Cela consolide l’ensemble de votre construction graphique en un seul endroit. Si vous faites régulièrement des graphiques ou des diagrammes, vous gagnez beaucoup de temps.
- Cela vous permet de revenir en arrière et de modifier le graphique si nécessaire. Une image limite les corrections rapides et exige que vous trouviez l’ancien fichier que vous avez utilisé pour faire le graphique.
- Certains diagrammes et graphiques comportent des fonctions interactives, ce qui ne serait jamais possible avec une image.
Dans l’ensemble, une extension WordPress de graphique simplifie le processus, mais vous donne quand même la plupart des fonctionnalités dont vous aurez besoin pour vos articles de blog.
5 plugins WordPress de diagrammes et graphiques efficaces en 2019
Avant de commencer avec un tutoriel sur la façon de créer de magnifiques diagrammes et graphiques WordPress, nous voulons parcourir les meilleures extensions pour accomplir ce dont vous avez besoin.
- wpDataTables
- WordPress Charts and Graphs Lite
- WordPress Charts
- Interactive Maps, Charts, Graphs
- UberChart
1. wpDataTables
wpDataTables est une extension WordPress très robuste ! Ne vous laissez pas berner par le nom. Elle peut faire beaucoup plus que créer vos tableaux habituels. Vous pouvez également concevoir toutes sortes de diagrammes et de graphiques. Elle a été spécialement développée pour vous permettre de saisir de grandes quantités de données et de les transformer rapidement en un bel affichage graphique pour vos lecteurs.
wpDataTables est une extension payante, à partir de 44$ pour une licence. Il a actuellement plus de 13.000 ventes sur CodeCanyon avec une note de 4.5 sur 5 étoiles, vous pouvez donc être assuré qu’il y a beaucoup de gens heureux de l’utiliser. Certaines de ses caractéristiques incluent :
- Tout est réactif, ce qui signifie qu’ils s’adapteront parfaitement à chaque appareil.
- Le plugin wpDataTables a trois moteurs de rendu de graphiques différents : Google Charts, Highcharts et Chart.js. Cela vous permet de rendre des graphiques simples et flexibles avec beaucoup d’options personnalisables.
- Actualisation automatique en temps réel des tableaux et graphiques
- Prévisualisez vos graphiques dans l’administration avec le tableau.
2. WordPress Charts and Graphs Lite
Si vous voulez afficher des données et des informations sur votre blog WordPress en utilisant de beaux diagrammes et graphiques, ne cherchez pas plus loin que l’excellente extension WordPress Charts and Graphs Lite. Elle permet de créer de superbes visuels interactifs tout en vous donnant une liberté totale de personnaliser le résultat pour qu’il réponde exactement à vos besoins : vous pouvez changer les couleurs, personnaliser les polices, masquer le texte, ajouter du texte – tout cela même après la publication du graphique. Afficher des graphiques dans vos articles et pages est aussi simple que de téléverser une feuille de calcul et d’ajouter le code court que l’extension génère automatiquement sur votre page.
Plus tard, si vous décidez de changer le type de graphique, par exemple d’un graphique en bloc à un graphique circulaire, appuyez simplement sur le bouton d’édition et faites le changement. Oui, c’est aussi simple que ça. Il convient également de mentionner que les diagrammes et graphiques qu’elle produit fonctionnent sur tous les écrans d’appareils (ordinateurs de bureau, tablettes, mobiles) de toutes tailles car l’extension est réactive.
Elle comprend neuf types de graphiques, la prise en charge des codes courts et la possibilité d’importer des chargements de données avec un CSV. Cette extension de graphique est aussi appelée l’extension Visualizer, vous pouvez donc la voir comme ça. Il existe une version gratuite et une version pro. La version Pro coûte au moins 74$ (une licence de site) et offre des outils d’importation à partir d’autres diagrammes. D’autres fonctionnalités Pro incluent :
- L’option de donner aux utilisateurs des capacités de modification
- La création d’un diagramme privé
- La synchronisation automatique avec votre fichier en ligne
- Autres types de graphiques
- Vous avez accès à un éditeur en direct
L’extension Lite est encore assez puissante. Voici quelques-uns des diagramme que vous pouvez faire :
- Diagramme linéaire
- Diagramme circulaire
- Diagramme à barres
- Diagramme en colonnes
- Diagramme de zone
- Diagramme géographique
- Diagramme de tableau
- Diagramme de jauge
- Diagramme en chandelier
- Diagramme combiné
- Diagramme de dispersion
- Diagramme chronologique
3. WordPress Charts
Le plugin WordPress Charts serait mon troisième choix, beaucoup d’utilisateurs l’aiment pour les conceptions propres, les animations et les options colorées. Cependant, sachez également qu’il n’a pas été mis à jour depuis un bon moment.
L’extension WordPress Chart offre six modèles uniques de diagrammes et de graphiques, que vous pouvez ajuster et insérer vos propres données pour les afficher sur votre site. Les diagrammes proposés comprennent :
- Ligne
- Bar
- Graphique
- Radar
- Zone polaire
- Types de beignets
Tous ces graphiques sont construits à l’aide de HTML5. Les options de personnalisation sont pratiquement infinies, mais vous devrez en savoir un peu plus sur le codage, les codes courts, ou au moins sur l’ajustement des réglages par défaut. La raison pour laquelle nous aimons tant cette extension WordPress de graphique est qu’elle est extrêmement légère. Vous pourriez insérer des douzaines de graphiques sur tous vos articles de blog et ne pas avoir de problème. Et c’est tout l’intérêt de travailler avec HTML5. Vous pouvez supprimer l’encombrement sans sacrifier aucune des fonctionnalités.
4. Interactive Maps, Charts, Graphs – For VC
Si vous avez actuellement l’extension Visual Composer sur votre site, l’extension Interactive Maps, Charts, Graphs – For VC est peut-être faite pour vous. Il s’agit d’un module pour Visual Composer, donc il n’y a aucune raison de l’obtenir autrement.
Le module se vend 12$, ce qui permet d’obtenir des cartes interactives, des diagrammes et des graphiques, le tout dans l’interface de Visual Composer. Le module est livré avec des icônes vectorielles, des polices Google, des couleurs illimitées, et un large éventail d’autres fonctionnalités pour construire et personnaliser vos diagrammes et graphiques. Le module contient vos diagrammes et graphiques standard, tels que les diagrammes circulaires et linéaires. Il y a aussi une fonction cartographique unique pour mettre en évidence certaines zones, qu’il s’agisse d’une carte locale ou d’une carte du monde.
5. UberChart – Plugin WordPress de diagramme
UberChart est une extension payante de graphique plus polyvalente, puisqu’elle ne nécessite pas l’extension Visual Composer. L’extension fournit 10 types de graphiques intégrés, pour lesquels vous recevez environ 240 options personnalisables par graphique.
Vous pouvez exporter et importer des données d’un simple clic, et la conception réactive garantit que tous vos graphiques apparaissent sur chaque appareil. Certains des types de diagrammes comprennent :
- Diagrammes linéaires
- Diagrammes de zone
- Diagrammes à barres
- Diagrammes circulaires
- Diagrammes de beignets
- Diagrammes à bulles
La partie la plus impressionnante de cette extension WordPress de graphique est l’éditeur de tableur. Il vous permet de copier des données depuis n’importe quel programme de votre choix (comme Excel, par exemple) en combinant les fonctions les plus avancées d’Excel et la polyvalence d’une extension de graphique.
Comment faire pour créer de beaux diagrammes et graphiques WordPress
L’un de nos plugins de graphiques préféré est WordPress Charts et Graphs Lite. Par conséquent, nous allons parcourir ce tutoriel avec seulement cette extension. Les autres extensions graphiques ont des outils similaires mais des interfaces différentes. Donc, je vous recommande de les tester tous pour voir laquelle vous convient, car wpDataTables est aussi très robuste !
Étape 1 : Installez et activez l’extension WordPress Charts and Graphs Lite.
C’est assez simple.
Étape 2 : Accédez à la bibliothèque du Visualiseur et ajoutez un nouveau graphique
Comme nous l’avons mentionné brièvement ci-dessus, l’extension WordPress Charts and Graphs Lite est également appelée Visualiseur. Il est quelque peu difficile de trouver la page des réglages, mais tout ce que vous avez à faire est d’aller dans Média > Bibliothèque du Visualiseur. Il n’y a pas d’autres réglages à configurer avant de commencer à utiliser vos graphiques WordPress.
Une fois dans la bibliothèque du visualiseur, vous verrez un message qui dit « Aucun diagramme trouvé ». C’est très bien, puisque nous n’avons pas encore fait de diagramme. Par conséquent, vous devez cliquer sur le bouton Ajouter vers le haut de la page.
Ceci révèle tous les diagrammes et graphiques WordPress que vous pouvez faire avec l’extension. Par exemple, il a des diagrammes circulaires, des diagrammes linéaires, des diagrammes de zone, des diagrammes géographiques et des diagrammes à barres. Neuf graphiques WordPress sont fournis dans la version gratuite. Vous pouvez obtenir trois graphiques supplémentaires si vous payez pour la version pro. Quoi qu’il en soit, je vais sélectionner un diagramme circulaire pour ce tutoriel.
Étape 3 : Importer les données dans le graphique WordPress
L’extension insère automatiquement les données pour que votre graphique ait quelque chose à afficher. Cependant, pour présenter vos propres données, vous devrez les importer en utilisant l’une des cinq méthodes suivantes. Vous pouvez :
- Importer des données à partir d’un fichier (probablement la méthode la plus courante)
- Importer des données à partir d’une URL
- Importer à partir d’un autre graphique
- Importer depuis WordPress (disponible uniquement dans la version Pro)
- Importer manuellement des données (disponible uniquement dans la version Pro)
Pour cet exemple, j’importe des données d’un fichier CSV. À l’origine, il s’agissait d’un fichier Excel, l’un des moyens les plus courants d’obtenir des données dans un diagramme ou un graphique WordPress. Lorsque vous importez des données à partir d’un fichier, cliquez sur le bouton Choisir un fichier, trouvez le fichier sur votre ordinateur, puis cliquez sur le bouton Importer dans votre tableau de bord WordPress.
Ceci devrait vous afficher un aperçu de ce à quoi vos données vont ressembler sur la gauche. La bonne nouvelle est que vous pouvez toujours revenir en arrière et ajuster le formatage sur votre CSV et réessayer. Il y a aussi beaucoup d’outils de personnalisation dans la prochaine étape pour rendre les choses un peu mieux.
Étape 4 : Personnaliser votre diagramme WordPress
Il y a un petit lien qui dit « Avancé » sous toutes les options d’importation. Cliquez sur ce bouton pour afficher vos réglages de personnalisation. Il y a pas mal d’options pour jouer avec, alors nous ne les examinerons pas toutes ici.
Mais nous pouvons commencer par le titre du diagramme. Je vais taper quelque chose comme « Où va votre temps » puisque mon diagramme indique le pourcentage de temps que les gens consacrent à certaines tâches au cours de la journée. Je peux également modifier la police, la taille, la couleur et l’emplacement du titre.
Au fur et à mesure que vous vous déplacez dans les réglages, vous remarquerez plusieurs onglets pour des choses comme les réglages généraux, les réglages de tranche, les actions dans l’interface publique, et plus encore. Vous voudrez très probablement décider où la légende va résider, car il s’agit d’une partie essentielle du graphique.
En dehors de cela, cela dépend complètement du type de graphique que vous essayez de faire, et des éléments que vous avez besoin d’afficher. Je vais prétendre que c’est un graphique WordPress pour un groupe d’étudiants que j’ai. J’aimerais donc leur donner la possibilité d’imprimer et de télécharger les données et le graphique.
Pour ce faire, accédez à l’onglet Actions d’interface publique. Des cases à cocher apparaissent pour permettre aux utilisateurs d’imprimer et de copier les données. Vous pouvez également leur fournir des feuilles Excel et des CSV téléchargeables. Une fois que vous avez fini de personnaliser votre graphique, assurez-vous de l’enregistrer.
Étape 5 : Copier le shortcode dans une page ou un article
Après avoir enregistré votre graphique WordPress, revenez à la bibliothèque du Visualiseur. Vous verrez une liste de vos graphiques et vous pourrez les filtrer en fonction de leur type. Comme je n’ai qu’un seul graphique en ce moment, je peux instantanément le voir comme la seule option. Pour publier votre graphique WordPress sur une page ou un article, vous devez copier le code court du graphique et le coller dans la page ou l’article souhaité. Le code court se trouve sous l’aperçu du graphique (voir la capture d’écran ci-dessous).
Une fois que vous avez copié le code court, créez une page ou un article, ou allez sur une page déjà publiée. Trouvez où vous voulez que le graphique aille et collez le code court.
Étape 6 : Visualiser le graphique WordPress sur l’interface publique
Je vous recommande de prévisualiser votre graphique avant de cliquer sur le bouton Publier. De cette façon, vous savez ce qui est envoyé à vos utilisateurs, d’autant plus que les diagrammes et graphiques WordPress peuvent être assez délicats. Si vous regardez la capture d’écran ci-dessous, vous verrez un aperçu de mon graphique de test sur l’interface publique d’un site. Les boutons Imprimer et Télécharger sont visibles, le graphique WordPress a de jolies animations lorsque vous faites défiler la page, et les couleurs et les éléments du titre sont beaux.
Les changements se produisent instantanément dans un aperçu en direct pour que vous puissiez voir comment ils affectent le graphique sans avoir à enregistrer et visualiser la page dans un nouvel onglet. Il y a une autre caractéristique qui mérite d’être mentionnée, et elle est assez impressionnante. Non seulement vous pouvez modifier les options de style d’un graphique, mais vous pouvez également modifier les données dans les graphiques en téléversant un autre fichier, en écrasant l’original et en remplaçant les anciennes données par les nouvelles.
Questions sur la façon de créer des graphiques WordPress ?
Tous les tableaux et graphiques WordPress ont leurs différentes fonctions. Ce qui est cool avec ces extensions, c’est que vous avez toute la flexibilité du monde. Par conséquent, je vous encourage à passer du temps à tester vos graphiques et à comprendre ce que fait chaque ajustement de réglage. Ensuite, vous finirez par devenir un maître des graphiques, et les gens vous demanderont comment faire. Si vous avez des questions ou des idées sur la façon de créer des diagrammes et des graphiques WordPress, écrivez-nous dans les commentaires ci-dessous.
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire