Che tipo di tabella delle mappe di calore possiamo creare? Bene, qualcosa come questo esempio qui sotto:<\/p>\n
S\u00ec, \u00e8 uno screenshot davvero lungo. \u00c8 possibile visualizzare la tabella della mappa di calore dinamica qui<\/a>.<\/p>\n Per creare una tabella heatmap per te o per i tuoi visitatori per confrontare pi\u00f9 facilmente i valori dei dati, hai poche opzioni a seconda dei dati di origine.<\/p>\n Ma prima di passare al tutorial, volevo farti sapere che ci sono due sezioni di questo articolo a cui puoi saltare direttamente:<\/p>\n Se non disponi di un’origine dati puoi creare la tua tabella heatmap da zero con l’opzione "Creazione tabelle manualmente"<\/a> in cui inserirai i valori dei dati manualmente.<\/p>\n Per iniziare a creare manualmente una tabella di dati, apri il pannello di amministrazione di WordPress, vai su wpDataTables -> Crea una tabella<\/strong>, scegli la terza opzione \u00a0"Crea una tabella manualmente"<\/strong> e fai clic su "Avanti"<\/strong>.<\/p>\n Ti verr\u00e0 mostrato il passaggio della procedura guidata che ti aiuter\u00e0 a creare la struttura della tabella in cui creerai 14 colonne: Periodo, Anno e tutti gli altri saranno i nomi dei mesi (Gen, Feb…). Per le colonne Periodo lascerai il tipo di colonna come "Stringa di una riga"<\/strong> e per tutte le altre imposterai\u00a0 il tipo di colonna "Intero" .<\/strong><\/p>\n Al termine della configurazione della tabella, fare clic su "Crea la tabella"<\/strong>. Si aprir\u00e0 un menu a discesa con le opzioni "Apri nell’editor standard" o "Apri nell’editor simile a Excel" e il gioco \u00e8 fatto. Viene creata la struttura della tabella. Ora inserirai i valori dei tuoi dati numerici nell’editor Standard\u00a0<\/a> o in un editor simile a Excel<\/a>.<\/p>\n Se disponi di dati in un’origine dati come Excel, CSV, JSON, foglio di calcolo Google, XML, array serializzato PHP o in una tabella in un database (origine SQL), utilizzerai la seconda opzione nella procedura guidata della tabella.<\/p>\n Per iniziare a creare una tabella di dati collegata a un’origine dati esistente, apri il pannello di amministrazione di WordPress, vai su wpDataTables -> Crea una tabella<\/strong>, scegli la seconda opzione "Crea<\/strong> \u00a0una tabella di dati collegata a un’origine dati esistente".<\/strong> e fare clic su \u00a0"Avanti"<\/strong>.<\/p>\n Dipende da quale fonte hai seguirai le istruzioni:<\/p>\n Per questa tabella, utilizziamo CSV come origine dati che puoi scaricare da qui<\/a>. Sceglierai CSV come "Tipo di origine dati di input"<\/strong> e quindi sul pulsante Sfoglia troverai l’origine che hai precedentemente scaricato e caricato sul tuo server. Fai clic su Salva modifiche<\/strong>, quindi wpDataTables legger\u00e0 il file CSV che hai caricato e verr\u00e0 creata la tabella.<\/p>\n Dopo aver creato la tabella, con una qualsiasi delle due opzioni, puoi personalizzare\u00a0<\/a> e configurare\u00a0<\/a> la tabella di WordPress di cui hai bisogno.<\/p>\n Nel nostro caso, attiviamo prima l’opzione "Mostra filtri in un<\/strong> \u00a0modulo sopra la tabella"\u00a0<\/strong> nella scheda " Ordinamento e filtro<\/strong> " nelle impostazioni della tabella e quindi configuriamo i filtri avanzati\u00a0<\/a> per ciascuna colonna. Per la colonna Periodo, impostiamo "Seleziona filtro casella" e "Filtro numero" per tutte le altre colonne.<\/p>\n Quindi attiviamo l’opzione "Reattivit\u00e0"<\/strong> nella\u00a0 scheda "Visualizza"<\/strong> nelle impostazioni della tabella e nascondiamo valori come le colonne "Mese" per tablet e dispositivi mobili in ciascuna Impostazioni colonna\u00a0<\/a> o pi\u00f9 velocemente nel pulsante Elenco colonne\u00a0<\/a> sopra la tabella.<\/p>\n Per personalizzare la tavolozza dei colori dei dati della tabella in modo facile e intuitivo, utilizziamo la formattazione condizionale<\/a>. Per la prima colonna, impostiamo la condizione che se la cella contiene 2 quindi "Imposta classe CSS cella<\/strong> " su "testo bianco-blu" in modo da avere un colore del carattere bianco sullo sfondo blu.<\/p>\n Quindi creiamo quelle classi nel campo " CSS<\/strong> personalizzato" nella scheda \u00a0" Personalizza"<\/strong> nelle impostazioni della tabella come questa:<\/p>\n Come questo:<\/p>\n Dove il numero 1 in .wpDataTable-1 \u00e8 l’ID della tua tabella, quindi dovrai cambiarlo per la tua tabella<\/p>\n Per tutte le altre colonne, impostiamo le stesse condizioni per impostare colori diversi in base al valore nella tabella per la tabella della temperatura massima.<\/p>\n Per la seconda tabella “Bassa temperatura" utilizziamo lo stesso approccio della tabella “Temperature Maximus”, eccetto le condizioni in Formattazione condizionale. Poich\u00e9 si tratta di un valore di temperatura inferiore, utilizziamo queste condizioni.<\/p>\n Quindi creiamo quelle classi nel campo " CSS<\/strong> personalizzato" nella scheda \u00a0" Personalizza"<\/strong> nelle impostazioni della tabella come questa:<\/p>\n Dove il numero 2 in .wpDataTable2 \u00e8 l’ID della tua tabella, quindi dovrai cambiarlo per la tua tabella.<\/p>\n Questo \u00e8 tutto!<\/p>\n Ora hai una mappa termica tabella in cui puoi confrontare facilmente i valori dei dati senza sembrare che tu stia leggendo la stampa fine di un contratto.<\/p>\n Se quello fosse un modo semplice e intuitivo per creare mappe di calore in una tabella, dai un’occhiata alla parte successiva.<\/p>\n Ora quello che devi fare \u00e8 apparire sulle tue pagine nel front-end. Come con qualsiasi altro plugin, utilizziamo gli shortcode per mostrare le tabelle sulle pagine o sui post degli utenti.\u00a0L’aggiunta di<\/a> \u00a0codici brevi\u00a0<\/a> \u00e8 molto semplice, soprattutto se stai utilizzando famosi page builder come Elementor, WP Bakery o Gutenberg.<\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Fonte immagine<\/a><\/p>\n Se ti \u00e8 piaciuto leggere questo articolo su come creare una tabella heatmap con wpDataTables, dovresti dare un’occhiata a questo su come progettare una tabella<\/a>.<\/p>\n Abbiamo anche scritto di alcuni argomenti correlati come le alternative a DataTables<\/a>, le librerie di tabelle JavaScript<\/a>, come creare una tabella, una tabella del sondaggio<\/a> e\u00a0 i plug -in delle tabelle dei prezzi di WordPress .<\/a><\/p>\n![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86807bd8a1.jpg\")
<\/a><\/p>\nCome creare una tabella heatmap con wpDataTables<\/h2>\n
1 Creazione di una tabella da zero<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680925c5c.png\")
<\/a><\/p>\n![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680b280c6.png\")
<\/a><\/p>\n2 Creazione di una mappa termica tabellare da un’origine dati<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680ea4280.png\")
<\/a><\/p>\n\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868107aa5d.png\")
<\/a><\/p>\n![\"Esempi](\"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![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868134e7ef.jpg\")
<\/a><\/p>\n![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868145dee1.png\")
<\/a><\/p>\n![\"Esempi](\"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>\nEsempi di tabelle di calore<\/h2>\n
App per il coinvolgimento dei dipendenti<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86817cf2ce.jpg\")
<\/a><\/p>\nMappa di calore<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681906078.jpg\")
<\/a><\/p>\nPiattaforma di apprendimento<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681a5c4bd.jpg\")
<\/a><\/p>\nHeatMap dell’inquinamento atmosferico<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681b877d1.jpg\")
<\/a><\/p>\nTemperature medie per alcune citt\u00e0 del Nord America<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681caeb85.jpg\")
<\/a><\/p>\nPronostici Mondiali femminili 2019<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681dbe6da.jpg\")
<\/a><\/p>\nTabella di prevalenza<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681ecb3cb.jpg\")
<\/a><\/p>\nResi azionari<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681fcb83a.jpg\")
<\/a><\/p>\nStatistiche sulle entrate del prodotto<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682136f1f.jpg\")
<\/a><\/p>\nTavolo a squadre<\/h3>\n
![\"Esempi](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682270202.jpg\")
<\/a><\/p>\n