Vilken typ av heatmap-tabell kan vi skapa? N\u00e5got som det h\u00e4r exemplet nedan:<\/p>\n
Ja, det \u00e4r en riktigt l\u00e5ng sk\u00e4rmdump. Du kan se den dynamiska v\u00e4rmekartan h\u00e4r<\/a>.<\/p>\n F\u00f6r att skapa en v\u00e4rmekartatabell f\u00f6r dig eller dina bes\u00f6kare f\u00f6r att l\u00e4ttare j\u00e4mf\u00f6ra datav\u00e4rden, har du n\u00e5gra alternativ beroende p\u00e5 dina k\u00e4lldata.<\/p>\n Men innan jag gick till handledningen ville jag l\u00e5ta dig veta att det finns tv\u00e5 avsnitt av den h\u00e4r artikeln som du kan hoppa till direkt:<\/p>\n Om du inte har en datak\u00e4lla kan du skapa din v\u00e4rmekartatabell fr\u00e5n b\u00f6rjan med alternativet "Skapa tabeller manuellt"<\/a> d\u00e4r du infogar datav\u00e4rden manuellt.<\/p>\n F\u00f6r att b\u00f6rja skapa en datatabell manuellt, \u00f6ppna din WordPress adminpanel, g\u00e5 till wpDataTables -> Skapa en tabell<\/strong>, v\u00e4lj det tredje alternativet \u00a0"Skapa en tabell manuellt"<\/strong> och klicka p\u00e5 "N\u00e4sta"<\/strong>.<\/p>\n Du kommer att visas guidesteget som hj\u00e4lper dig att skapa tabellstrukturen d\u00e4r du kommer att skapa 14 kolumner: Period, Year, och alla andra kommer att vara namnen p\u00e5 m\u00e5naderna (jan, feb…). F\u00f6r periodkolumner l\u00e4mnar du kolumntypen som "Enradsstr\u00e4ng"<\/strong> och f\u00f6r alla andra kommer du att st\u00e4lla in kolumntypen "Heltal"<\/strong>.<\/p>\n N\u00e4r du \u00e4r klar med att konfigurera tabellen, klicka p\u00e5 "Skapa tabellen"<\/strong>. En rullgardinsmeny \u00f6ppnas med alternativen "\u00d6ppna i standardredigerare" eller "\u00d6ppna i Excel-liknande redigerare" och det \u00e4r allt. Tabellstrukturen skapas. Nu kommer du att infoga dina numeriska datav\u00e4rden \u00f6ver Standardredigeraren\u00a0<\/a> eller en Excel-liknande redigerare<\/a>.<\/p>\n Om du har data i n\u00e5gon datak\u00e4lla som Excel, CSV, JSON, Google-kalkylblad, XML, PHP Serialized array eller i en tabell i en databas (SQL-k\u00e4lla), kommer du att anv\u00e4nda det andra alternativet i tabellguiden.<\/p>\n F\u00f6r att b\u00f6rja skapa en datatabell kopplad till en befintlig datak\u00e4lla, \u00f6ppna din WordPress adminpanel, g\u00e5 till wpDataTables -> Skapa en tabell<\/strong>, v\u00e4lj det andra alternativet "Skapa<\/strong> \u00a0en datatabell l\u00e4nkad till en befintlig datak\u00e4lla."<\/strong>, och klicka p\u00e5 \u00a0"N\u00e4sta"<\/strong>.<\/p>\n Beroende p\u00e5 vilken k\u00e4lla du har kommer du att f\u00f6lja instruktionerna:<\/p>\n F\u00f6r den h\u00e4r tabellen anv\u00e4nder vi CSV som en datak\u00e4lla som du kan ladda ner h\u00e4r<\/a>. Du kommer att v\u00e4lja CSV som "Input data source type"<\/strong> och sedan \u00f6ver knappen Bl\u00e4ddra hitta den k\u00e4lla som du tidigare laddat ner och laddat upp p\u00e5 din server. Klicka\u00a0 p\u00e5 Spara \u00e4ndringar<\/strong> s\u00e5 att wpDataTables l\u00e4ser CSV-filen du laddade upp och tabellen skapas.<\/p>\n Efter att ha skapat tabellen, med n\u00e5got av de tv\u00e5 alternativen, kan du anpassa\u00a0<\/a> och konfigurera\u00a0<\/a> din WordPress-tabell som du beh\u00f6ver.<\/p>\n I v\u00e5rt fall aktiverar vi f\u00f6rst alternativet "Visa filter i ett<\/strong> \u00a0formul\u00e4r ovanf\u00f6r tabellen"\u00a0<\/strong> p\u00e5 fliken " Sortering och filtrering<\/strong> " i tabellinst\u00e4llningar och konfigurerar sedan avancerade filter\u00a0<\/a> f\u00f6r varje kolumn. F\u00f6r kolumnen Period st\u00e4ller vi in \u200b\u200b"V\u00e4lj boxfilter" och "Nummerfilter" f\u00f6r alla andra kolumner.<\/p>\n Sedan aktiverar vi alternativet "Responsivitet"<\/strong> p\u00e5\u00a0 fliken "Visa"<\/strong> i tabellinst\u00e4llningar och d\u00f6ljer v\u00e4rden som "M\u00e5nad"-kolumnerna f\u00f6r surfplattor och mobila enheter i varje kolumninst\u00e4llningar\u00a0<\/a> eller snabbare i kolumnlista-knappen\u00a0<\/a> ovanf\u00f6r tabellen.<\/p>\n F\u00f6r att anpassa f\u00e4rgpaletten f\u00f6r tabelldata p\u00e5 ett enkelt och intuitivt s\u00e4tt anv\u00e4nder vi villkorlig formatering<\/a>. F\u00f6r den f\u00f6rsta kolumnen st\u00e4ller vi in \u200b\u200bvillkoret att om cellen inneh\u00e5ller 2 s\u00e5 "Ange cell CSS class<\/strong> " till "bl\u00e5-vit text" s\u00e5 att vi f\u00e5r en vit teckenf\u00e4rg \u00f6ver den bl\u00e5 bakgrunden.<\/p>\n Sedan skapar vi dessa klasser i f\u00e4ltet " Anpassad CSS" p\u00e5 fliken "<\/strong> Anpassa"<\/strong> i tabellinst\u00e4llningar s\u00e5 h\u00e4r:<\/p>\n S\u00e5 h\u00e4r:<\/p>\n D\u00e4r nummer 1 i .wpDataTable-1 \u00e4r ditt bords ID s\u00e5 du m\u00e5ste \u00e4ndra det f\u00f6r din tabell<\/p>\n F\u00f6r alla andra kolumner st\u00e4ller vi in \u200b\u200bsamma villkor f\u00f6r att st\u00e4lla in olika f\u00e4rger baserat p\u00e5 v\u00e4rdet i tabellen f\u00f6r Max Temperature-tabellen.<\/p>\n F\u00f6r den andra tabellen "L\u00e5g temperatur" anv\u00e4nder vi samma tillv\u00e4gag\u00e5ngss\u00e4tt som f\u00f6r tabellen "Temperature Maximus", f\u00f6rutom villkoren i villkorlig formatering. Eftersom det \u00e4r ett l\u00e4gre temperaturv\u00e4rde anv\u00e4nder vi dessa f\u00f6rh\u00e5llanden.<\/p>\n Sedan skapar vi dessa klasser i f\u00e4ltet " Anpassad CSS" p\u00e5 fliken "<\/strong> Anpassa"<\/strong> i tabellinst\u00e4llningar s\u00e5 h\u00e4r:<\/p>\n D\u00e4r nummer 2 i .wpDataTable2 \u00e4r ditt bords ID s\u00e5 du m\u00e5ste \u00e4ndra det f\u00f6r din tabell.<\/p>\n Det \u00e4r allt!<\/p>\n Du har nu en tabellv\u00e4rmekarta d\u00e4r du enkelt kan j\u00e4mf\u00f6ra datav\u00e4rden utan att se ut som om du l\u00e4ser det finstilta i ett kontrakt.<\/p>\n Om det var ett enkelt och intuitivt s\u00e4tt att skapa v\u00e4rmekartor i en tabell, kolla in n\u00e4sta del.<\/p>\n Vad du nu beh\u00f6ver g\u00f6ra \u00e4r att dyka upp p\u00e5 dina sidor i front-end. Som med alla andra plugin anv\u00e4nder vi kortkoder f\u00f6r att visa tabeller p\u00e5 anv\u00e4ndarnas sidor eller inl\u00e4gg.\u00a0Det \u00e4r v\u00e4ldigt enkelt att l\u00e4gga<\/a> \u00a0till kortkoder\u00a0<\/a>, speciellt om du anv\u00e4nder popul\u00e4ra sidbyggare som Elementor, WP Bakery eller Gutenberg.<\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Bildk\u00e4lla<\/a><\/p>\n Om du tyckte om att l\u00e4sa den h\u00e4r artikeln om hur man skapar en v\u00e4rmekartatabell med wpDataTables, b\u00f6r du kolla in den h\u00e4r om hur man designar en tabell<\/a>.<\/p>\n Vi skrev ocks\u00e5 om n\u00e5gra relaterade \u00e4mnen som DataTables-alternativ<\/a>, JavaScript-tabellbibliotek<\/a>, hur man skapar en tabell en unders\u00f6kningstabell<\/a> och WordPress-<\/a> plugins f\u00f6r \u00a0pristabeller.<\/p>\n![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86807bd8a1.jpg\")
<\/a><\/p>\nHur man skapar en v\u00e4rmekartatabell med wpDataTables<\/h2>\n
1 Skapa en tabell fr\u00e5n noll<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680925c5c.png\")
<\/a><\/p>\n![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680b280c6.png\")
<\/a><\/p>\n2 Skapa en tabellv\u00e4rmekarta fr\u00e5n en datak\u00e4lla<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8680ea4280.png\")
<\/a><\/p>\n\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868107aa5d.png\")
<\/a><\/p>\n![\"Exempel](\"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![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868134e7ef.jpg\")
<\/a><\/p>\n![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e868145dee1.png\")
<\/a><\/p>\n![\"Exempel](\"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>\nExempel p\u00e5 tabellv\u00e4rmekarta<\/h2>\n
App f\u00f6r medarbetarengagemang<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e86817cf2ce.jpg\")
<\/a><\/p>\nV\u00e4rmekarta<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681906078.jpg\")
<\/a><\/p>\nL\u00e4rande plattform<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681a5c4bd.jpg\")
<\/a><\/p>\nLuftf\u00f6roreningar HeatMap<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681b877d1.jpg\")
<\/a><\/p>\nMedeltemperaturer f\u00f6r utvalda st\u00e4der i Nordamerika<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681caeb85.jpg\")
<\/a><\/p>\n2019 VM f\u00f6r damer f\u00f6ruts\u00e4gelser<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681dbe6da.jpg\")
<\/a><\/p>\nPrevalenstabell<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681ecb3cb.jpg\")
<\/a><\/p>\nAktier g\u00e5r tillbaka<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8681fcb83a.jpg\")
<\/a><\/p>\nProduktint\u00e4ktsstatistik<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682136f1f.jpg\")
<\/a><\/p>\nLagtabell<\/h3>\n
![\"Exempel](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-179430-61e8682270202.jpg\")
<\/a><\/p>\n