Quel type de tableau heatmap pouvons-nous cr\u00e9er\u00a0? Eh bien, quelque chose comme cet exemple ci-dessous :<\/p>\n
Oui, c’est une tr\u00e8s longue capture d’\u00e9cran. Vous pouvez consulter le tableau de la carte thermique dynamique ici<\/a>.<\/p>\n Pour cr\u00e9er un tableau de carte thermique pour vous ou vos visiteurs afin de comparer plus facilement les valeurs de donn\u00e9es, vous avez peu d’options en fonction de vos donn\u00e9es source.<\/p>\n Mais avant de passer au didacticiel, je voulais vous faire savoir qu’il y a deux sections de cet article auxquelles vous pouvez acc\u00e9der directement\u00a0:<\/p>\n Si vous n’avez pas de source de donn\u00e9es, vous pouvez cr\u00e9er votre table de carte de chaleur \u00e0 partir de z\u00e9ro avec l’option "Cr\u00e9er des tables manuellement"<\/a> o\u00f9 vous ins\u00e9rerez les valeurs de donn\u00e9es manuellement.<\/p>\n Pour commencer \u00e0 cr\u00e9er une table de donn\u00e9es manuellement, ouvrez votre panneau d’administration WordPress, allez dans wpDataTables -> Cr\u00e9er une table<\/strong>, choisissez la troisi\u00e8me option \u00a0"Cr\u00e9er une table manuellement"<\/strong>, et cliquez sur "Suivant"<\/strong>.<\/p>\n Vous verrez l’\u00e9tape de l’assistant qui vous aidera \u00e0 cr\u00e9er la structure de la table o\u00f9 vous cr\u00e9erez 14 colonnes: P\u00e9riode, Ann\u00e9e, et toutes les autres seront les noms des mois (Jan, F\u00e9v\u2026). Pour les colonnes P\u00e9riode, vous laisserez le type de colonne sur "Cha\u00eene sur une ligne"<\/strong> et pour toutes les autres, vous\u00a0 d\u00e9finirez le type de colonne "Entier" .<\/strong><\/p>\n Lorsque vous avez fini de configurer le tableau, cliquez sur "Cr\u00e9er le tableau"<\/strong>. Une liste d\u00e9roulante s’ouvrira avec des options pour "Ouvrir dans l’\u00e9diteur standard" ou "Ouvrir dans l’\u00e9diteur de type Excel" et c’est tout. La structure du tableau est cr\u00e9\u00e9e. Vous allez maintenant ins\u00e9rer vos valeurs de donn\u00e9es num\u00e9riques dans l’ \u00e9diteur standard\u00a0<\/a> ou dans un\u00a0 \u00e9diteur de type Excel<\/a>.<\/p>\n Si vous avez des donn\u00e9es dans une source de donn\u00e9es telle qu’Excel, CSV, JSON, une feuille de calcul Google, XML, un tableau s\u00e9rialis\u00e9 PHP ou dans une table d’une base de donn\u00e9es (source SQL), vous utiliserez la deuxi\u00e8me option de l’assistant de table.<\/p>\n Pour commencer \u00e0 cr\u00e9er une table de donn\u00e9es li\u00e9e \u00e0 une source de donn\u00e9es existante, ouvrez votre panneau d’administration WordPress, allez dans wpDataTables -> Cr\u00e9er une table<\/strong>, choisissez la deuxi\u00e8me option "Cr\u00e9er<\/strong> \u00a0une table de donn\u00e9es li\u00e9e \u00e0 une source de donn\u00e9es existante".<\/strong>, et cliquez sur \u00a0"Suivant"<\/strong>.<\/p>\n Selon la source que vous avez, vous suivrez les instructions\u00a0:<\/p>\n Pour ce tableau, nous utilisons CSV comme source de donn\u00e9es que vous pouvez t\u00e9l\u00e9charger ici<\/a>. Vous choisirez CSV comme "Type de source de donn\u00e9es d’entr\u00e9e"<\/strong>, puis sur le bouton Parcourir, recherchez la source que vous avez pr\u00e9c\u00e9demment t\u00e9l\u00e9charg\u00e9e et t\u00e9l\u00e9charg\u00e9e sur votre serveur. Cliquez sur Enregistrer les modifications<\/strong>, ainsi wpDataTables lira le fichier CSV que vous avez t\u00e9l\u00e9charg\u00e9 et la table sera cr\u00e9\u00e9e.<\/p>\n Apr\u00e8s avoir cr\u00e9\u00e9 le tableau, avec l’une des deux options, vous pouvez personnaliser\u00a0<\/a> et configurer\u00a0<\/a> votre tableau WordPress selon vos besoins.<\/p>\n Dans notre cas, nous activons d’abord l’option \u00ab\u00a0Afficher les filtres dans un<\/strong> \u00a0formulaire au-dessus du tableau\u00a0\u00bb\u00a0<\/strong> sur l’onglet \u00ab\u00a0Tri et filtrage<\/strong>\u00bb dans les param\u00e8tres du tableau, puis configurons les filtres avanc\u00e9s\u00a0<\/a> pour chaque colonne. Pour la colonne P\u00e9riode, nous d\u00e9finissons ‘Select Box filter’ et ‘Number filter’ pour toutes les autres colonnes.<\/p>\n Ensuite, nous activons l’option "R\u00e9activit\u00e9"<\/strong> sur l’\u00a0 onglet "Affichage"<\/strong> dans les param\u00e8tres du tableau et masquons des valeurs telles que les colonnes "Mois" pour les tablettes et les appareils mobiles dans chaque param\u00e8tre de colonne\u00a0<\/a> ou plus rapidement dans le bouton Liste de colonnes\u00a0<\/a> au-dessus du tableau.<\/p>\n Pour personnaliser la palette de couleurs des donn\u00e9es du tableau de mani\u00e8re simple et intuitive, nous utilisons la\u00a0 mise en forme conditionnelle<\/a>. Pour la premi\u00e8re colonne, nous d\u00e9finissons la condition que si la cellule contient 2, alors "D\u00e9finir la classe CSS de la cellule<\/strong> " sur "texte bleu-blanc" afin que nous ayons une couleur de police blanche sur le fond bleu.<\/p>\n Ensuite, nous cr\u00e9ons ces classes dans le champ \u00ab\u00a0CSS personnalis\u00e9\u00a0\u00bb de l’onglet \u00ab**<\/strong>\u00a0Personnaliser\u00a0\u00bb** dans les param\u00e8tres du tableau comme celui-ci\u00a0:<\/p>\n Comme \u00e7a:<\/p>\n O\u00f9 le num\u00e9ro 1 dans .wpDataTable-1 est l’ID de votre table, vous devrez donc le changer pour votre table<\/p>\n Pour toutes les autres colonnes, nous d\u00e9finissons les m\u00eames conditions pour d\u00e9finir des couleurs diff\u00e9rentes en fonction de la valeur du tableau pour le tableau Max Temperature.<\/p>\n Pour le deuxi\u00e8me tableau \u00ab\u00a0Basse temp\u00e9rature\u00a0\u00bb, nous utilisons la m\u00eame approche que pour le tableau \u00ab\u00a0Temp\u00e9rature maximale\u00a0\u00bb, \u00e0 l’exception des conditions en format conditionnel. Comme il s’agit d’une valeur de temp\u00e9rature inf\u00e9rieure, nous utilisons ces conditions.<\/p>\n Ensuite, nous cr\u00e9ons ces classes dans le champ \u00ab\u00a0CSS personnalis\u00e9\u00a0\u00bb de l’onglet \u00ab**<\/strong>\u00a0Personnaliser\u00a0\u00bb** dans les param\u00e8tres du tableau comme celui-ci\u00a0:<\/p>\n O\u00f9 le num\u00e9ro 2 dans .wpDataTable2 est l’ID de votre table, vous devrez donc le changer pour votre table.<\/p>\n C’est \u00e7a!<\/p>\n Vous avez maintenant une carte thermique de table o\u00f9 vous pouvez facilement comparer les valeurs des donn\u00e9es sans avoir l’air de lire les petits caract\u00e8res d’un contrat.<\/p>\n S’il s’agissait d’un moyen simple et intuitif de cr\u00e9er des cartes thermiques dans un tableau, consultez la partie suivante.<\/p>\n Maintenant, ce que vous devez faire est d’appara\u00eetre sur vos pages dans le front-end. Comme avec tout autre plugin, nous utilisons des codes abr\u00e9g\u00e9s pour afficher des tableaux sur les pages ou les publications des utilisateurs.\u00a0L’ajout<\/a> \u00a0de codes abr\u00e9g\u00e9s\u00a0<\/a> est tr\u00e8s simple, surtout si vous utilisez des constructeurs de pages populaires comme Elementor, WP Bakery ou Gutenberg.<\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Source des images<\/a><\/p>\n Si vous avez aim\u00e9 lire cet article sur la fa\u00e7on de cr\u00e9er une table de carte thermique avec wpDataTables, vous devriez consulter celui-ci sur la fa\u00e7on de concevoir une table<\/a>.<\/p>\n Nous avons \u00e9galement \u00e9crit sur quelques sujets connexes tels que les alternatives DataTables<\/a>, les biblioth\u00e8ques de tables JavaScript<\/a>, comment cr\u00e9er une table une table d’ enqu\u00eate<\/a> et\u00a0 les plugins de table de tarification WordPress<\/a>.<\/p>\n![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86807bd8a1.jpg\")
<\/a><\/p>\nComment cr\u00e9er une table de carte thermique avec wpDataTables<\/h2>\n
1 Cr\u00e9er une table \u00e0 partir de z\u00e9ro<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680925c5c.png\")
<\/a><\/p>\n![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680b280c6.png\")
<\/a><\/p>\n2 Cr\u00e9ation d’une carte thermique de table \u00e0 partir d’une source de donn\u00e9es<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680ea4280.png\")
<\/a><\/p>\n\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868107aa5d.png\")
<\/a><\/p>\n![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681182f8d.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.blue{ background-color: #0083c2 !important;}\n\n.wpdt-c .wpDataTablesWrapper .wpDataTable-1 td.white-text{ color: #FFFFFF !important;}\n<\/code><\/pre>\n![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868134e7ef.jpg\")
<\/a><\/p>\n![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868145dee1.png\")
<\/a><\/p>\n![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681655e4e.png\")
<\/a><\/p>\n.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.white-text{ color: #FFFFFF !important;}\n\n.wpdt-c .wpDataTablesWrapper .wpDataTable-2 td.black-text{ color: #000000 !important;}\n<\/code><\/pre>\nExemples de cartes thermiques de tableau<\/h2>\n
Application d’engagement des employ\u00e9s<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86817cf2ce.jpg\")
<\/a><\/p>\nCarte de chaleur<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681906078.jpg\")
<\/a><\/p>\nPlateforme d’apprentissage<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681a5c4bd.jpg\")
<\/a><\/p>\nCarte thermique de la pollution atmosph\u00e9rique<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681b877d1.jpg\")
<\/a><\/p>\nTemp\u00e9ratures moyennes pour certaines villes d’Am\u00e9rique du Nord<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681caeb85.jpg\")
<\/a><\/p>\nPr\u00e9dictions Coupe du monde f\u00e9minine 2019<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681dbe6da.jpg\")
<\/a><\/p>\nTableau de pr\u00e9valence<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681ecb3cb.jpg\")
<\/a><\/p>\nLes retours de stock<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681fcb83a.jpg\")
<\/a><\/p>\nStatistiques sur les revenus des produits<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682136f1f.jpg\")
<\/a><\/p>\nTableau des \u00e9quipes<\/h3>\n
![\"Exemples](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682270202.jpg\")
<\/a><\/p>\n