K. Andersson
Oavsett om du kör omröstningar, sammanställer data eller gör statistiska studier, är att skapa diagram och grafer det bästa sättet att effektivt presentera information på din WordPress-webbplats på ett visuellt sätt. Det låter dig omvandla komplexa datauppsättningar och fynd till lättförståelig information.
I det här inlägget visar vi dig hur du kan skapa interaktiva och dynamiska diagram och grafer och lägga till dem på din WordPress-webbplats med gratis Visualiserare plugin. Innan vi börjar, låt oss snabbt gå igenom några av de främsta anledningarna till varför du bör skapa diagram och grafer direkt i WordPress istället för att använda diagrambyggare eller grafprogram.
Snabblänkar:
Varför du bör använda ett plugin för att göra diagram och grafer i WordPress
Om du regelbundet skapar diagram och grafer för att lägga till på din webbplats är chansen stor att du använder ett verktyg som Excel eller Google Sheets. Problemet med detta tillvägagångssätt är arbetsflödet och processen:
- Skapa diagram (eller diagram) i Excel eller Google Sheets.
- Ta en skärmdump av diagrammet (eller grafen).
- Ladda upp den som en bild till din WordPress-webbplats.
Detta tillvägagångssätt är bra för alla som skapar diagram ibland. Men vad händer om du vill att dina diagram ska vara inbyggda på webbplatsen, ha lite interaktivitet, vara mobila och kanske till och med uppdatera från en tredjepartskälla i realtid? Om det låter som du är det en bättre idé att använda ett WordPress-plugin för diagram och grafer – som Visualiserare.
Här är några fler anledningar till varför du bör överväga att använda ett plugin för att göra diagram och grafer direkt i WordPress:
- Låter dig bygga grafer och publicera dem från ett ställe. Om du måste skapa diagram och grafer regelbundet, kommer detta att hjälpa dig att spara mycket tid och förbättra ditt arbetsflöde.
- Låter dig enkelt öppna ett projekt och göra snabba ändringar och modifieringar. När du arbetar med Excel eller Google Sheets måste du gå tillbaka och hitta filen du arbetade med, göra de ändringar som krävs, ta en ny skärmdump och ladda upp den till din webbplats igen.
- Tillgång till interaktiva funktioner för att göra dina diagram och diagram mer intressanta. Du kan helt enkelt inte lägga till interaktiva element till bilder eller skärmdumpar.
- Gör det lättare att samarbeta med andra användare. Om du till exempel behöver författare eller redaktörer för att granska grafen (och göra ändringar eller tillägg), är det mycket enklare om alla kan modifiera samma graf så att du inte har flera versioner som flyter runt.
Enkelt uttryckt hjälper ett WordPress-plugin för diagram och grafer att förenkla ditt arbetsflöde och
kommer med de flesta funktioner du behöver för att lägga till engagerande (och interaktiva) diagram till din WordPress-webbplats.
Vi introducerar Visualizer: Tables and Charts Manager för WordPress
Themeisle’s Visualizer: Tabell- och diagramhanterare för WordPress är ett lätt plugin som gör det möjligt för användare att skapa diagram, grafer och tabeller direkt från sin WordPress-webbplats.
Plugin-programmet har ett användarvänligt gränssnitt som låter användare skapa, hantera och bädda in interaktiva bilder i inlägg och sidor. Ur lådan kommer Visualizer med åtta olika diagramtyper:
- Tabell
- Paj-/munkdiagram
- Linjediagram
- Ytdiagram
- Geodiagram
- Stapeldiagram
- Kolumndiagram
- Spridningsdiagram
Du kommer att kunna anpassa tabellerna, diagrammen och graferna du skapar genom att ändra deras färger, lägga till eller dölja text och använda olika typsnitt. Utöver detta har varje diagram sina egna alternativ som låter dig anpassa dess utseende och känsla.
Utöver detta kan du också ändra vilken typ av graf som visas på din webbplatss front-end. Du kan till exempel enkelt ändra ett cirkeldiagram till ett linjediagram bara genom att klicka på redigera-knappen och välja vilken typ av diagram du vill byta till. Tabellerna, diagrammen och graferna du skapar med Visualizer renderas med HTML5- och SVG-teknik. Med andra ord, de är helt lyhörda och bärbara över plattformar.
Visualizer-pluginet har också en premiumversion, Visualizer Pro, som börjar på $59 för en enda webbplatslicens. Premiumversionen av plugin låser upp ytterligare diagramtyper (mätdiagram, ljusstakediagram, tidslinje, combo, polarområde och radar/spindeldiagram) och erbjuder avancerade funktioner inklusive:
- Ger användarna redigeringsbehörighet.
- Privat graf- och diagrambyggnad.
- Synkronisera automatiskt diagram med din onlinefil.
- Tillgång till liveredigeraren för snabb och enkel dataredigering.
- Importera data direkt från andra diagram.
Nu när vi vet vad Visualizer-pluginet är och vad du kan göra med det, låt oss gå igenom en snabb steg-för-steg-handledning som förklarar hur du kommer igång med att skapa diagram och grafer i WordPress.
Hur man skapar diagram och grafer i WordPress med Visualizer
Visualizer är en av de bästa (och mest intuitiva) plugins som finns tillgängliga för att skapa tabeller, diagram och grafer i WordPress. Här tar vi dig genom steg-för-steg-handledningen för att skapa visuellt tilltalande diagram och grafer och visa dem på din webbplats.
Steg #1: Installera och aktivera insticksprogrammet
Det första steget är att installera Visualizer-pluginet på din WordPress-webbplats. Eftersom detta är ett gratis plugin kan du göra detta direkt från adminpanelen genom att gå över till Plugins > Lägg till ny.
När du har installerat plugin-programmet klickar du på
Aktivera knapp. Du kommer att märka att ett nytt menyalternativ läggs till i sidofältsmenyn som heter Visualiserare.
Steg #2: Lägg till ett nytt diagram
När du har installerat insticksprogrammet Visualizer klickar du på Visualiserare menyalternativ från adminpanelen för att komma åt Visualizerbibliotek.
Härifrån klickar du på Lägg till ny för att börja skapa ditt första diagram.
På popup-skärmen ser du några olika diagramtyper att välja mellan.
Klicka på alternativknappen bredvid diagramtypen du vill lägga till på din WordPress-webbplats. För syftet med denna handledning kommer vi att demonstrera genom att skapa ett enkelt kolumndiagram. Klicka på Nästa knappen längst ned på skärmen för att fortsätta.
Steg #3: Importera data till diagrammet
I det här steget visar vi dig hur du kan importera data och lägga till den i din tabell, diagram eller graf. Visualizer lägger automatiskt till exempeldata till ditt diagram så att du kan se hur det skulle se ut på front-end.
För att ersätta dummy-data med din egen kan du välja från en av följande dataimportmetoder:
- Importera data från filen
- Importera data från URL
- Importera från andra diagram (tillgängligt med Pro-versionen)
- Importera från WordPress (tillgänglig med Pro-versionen)
- Importera från databas (tillgänglig med Pro-versionen)
- Importera data manuellt
I demonstrationssyfte importerar vi en datauppsättning från en CSV-fil. För att göra detta, klicka på Välj FIL knappen under Importera data från filen och leta efter CSV-filen på skrivbordet. tryck på Importera för att fortsätta.
I den vänstra panelen bör du kunna se en förhandsvisning av hur den nya importerade datan kommer att se ut. Om du behöver göra ändringar i din datauppsättning kan du uppdatera din CSV-fil och återimportera den.
Proffstips: Om du inte är säker på hur du formaterar data i din CSV-fil kan du ladda ner en exempel-CSV-fil från plugin-programmet. När du har valt diagramtyp kommer det att finnas en textlänk till exemplet CSV i den högra panelen i popup-fönstret (som visas ovan). Klicka på detta för att ladda ner det relevanta CSV-filexemplet.
Steg #4: Anpassa diagrammet
Nu när du har valt en diagramtyp och importerat din datauppsättning kan du anpassa din tabell, diagram eller graf. Här är hur:
Från samma skärm kommer du att se en länk som heter Avancerad direkt under alternativen för dataimport. Klicka på länken för att visa de anpassningsalternativ som är tillgängliga för dig för den typ av diagram du valt.
I stort sett bör du se allmänna inställningar (diagramtitlar, teckensnitt, legender, verktygstips och animationer), frontend-åtgärder, manuella konfigurationer och inställningar för diagramstorlek och placering. Beroende på vilken typ av diagram du valde att skapa kan du se lite olika alternativ under Diagraminställningar sektion.
En av de framstående funktionerna du får med Visualizer är dess förmåga att låta dig aktivera front-end-alternativ för dina diagram. Du kan komma åt dessa inställningar genom att gå över till Diagraminställningar > Frontend-åtgärder > Handlingar.
De tillgängliga alternativen inkluderar:
- Skriva ut. För att möjliggöra utskrift av diagrammet eller tabellen.
- CSV. För att möjliggöra nedladdning av data som en CSV direkt från front-end.
- Excel. För att möjliggöra nedladdning av data som ett Excel-kalkylblad.
- Kopiera. För att möjliggöra kopiering av data till urklipp.
När du har anpassat ditt diagram och aktiverat alla gränssnittsalternativ som du vill göra tillgängliga klickar du på Skapa diagram knapp.
Steg #5: Lägg till kortkoden för diagrammet på en sida eller ett inlägg
När du har skapat diagrammet omdirigeras du automatiskt till Visualizerbibliotek skärmen du startade från. Du bör kunna se diagrammet eller grafen du just skapade. Nästa steg är att lägga till diagrammet i din webbplats. För detta måste du kopiera diagrammets kortkod. Här är vad du behöver göra:
Du bör kunna se kortkoden för diagrammet i det nedre vänstra hörnet av diagrammet direkt under förhandsvisningen. Kopiera det helt enkelt till ditt urklipp.
Skapa sedan ett nytt inlägg eller sida där du vill lägga till diagrammet. (Alternativt kan du öppna ett befintligt inlägg eller en sida.) Klistra helt enkelt in kortkoden för diagrammet där du vill visa diagrammet.
Klicka på Förhandsvisning knappen för att förhandsgranska ditt inlägg eller din sida i din webbplatss frontend. Det borde se ut ungefär så här:
Du bör ta en stund för att se till att allt fungerar korrekt (till exempel animationer och front-end-alternativ). Om allt ser bra ut kan du gå vidare och Publicera
inlägget eller sidan.
Men om du behöver göra ändringar i din tabell, diagram eller graf, gå helt enkelt tillbaka till Visualiserare > Diagrambibliotek
från adminpanelen och redigera ditt diagram. Du kan ytterligare anpassa grafen, aktivera (eller inaktivera) alternativ, ändra förklaringspositioner och till och med ersätta datamängden.
Eftersom diagrammets kortkod förblir densamma även efter redigering, behöver du inte gå tillbaka till inlägget eller sidan och uppdatera det manuellt. Alla ändringar du gör i diagrammet från Visualizer kommer automatiskt att återspeglas i din webbplats.
Interaktiva diagramexempel
Här är några interaktiva exempel på tabeller, diagram och grafer som du kan skapa med hjälp av gratisversionen av Visualizer-plugin:
Cirkeldiagram Demo
Geodiagram Demo
Kolumndiagram Demo
Linjediagram Demo
Area Chart Demo
Stapeldiagram Demo
Scatter Chart Demo
Exempel på datatabell
Slutsats
Excel eller Google Sheets kanske inte är det mest effektiva sättet att lägga till tabeller, diagram och diagram till din WordPress-webbplats – särskilt om du behöver göra detta ofta. Istället rekommenderar vi att du använder gratis Visualiserareplugin som låter dig:
- Skapa, redigera och hantera alla dina tabeller, diagram och diagram utan att behöva lämna din WordPress-webbplats.
- Leverera bättre användarupplevelser genom att bädda in interaktiva, visuellt tilltalande diagram i dina inlägg och sidor.
- Anpassa enkelt de diagram och diagram du skapar för att matcha din webbplats varumärke.
- Aktivera gränssnittsalternativ som låter besökare skriva ut diagram, ladda ner datauppsättningar (som CSV:er och Excel-kalkylblad och kopiera data direkt till sitt urklipp.
Och närhelst du är redo att ta saker till nästa nivå kan du uppgradera till Visualizer Pro för att låsa upp ytterligare diagramtyper och få tillgång till avancerad funktionalitet. Vilka är några av de olika typerna av diagram och grafer du behöver lägga till på din WordPress-webbplats? Låt oss veta genom att kommentera nedan.
