Så här skapar du barer och diagram i WordPress med Visualizer

Vill du lägga till staplar och diagram i WordPress? Visuella hjälpmedel som graf, barer, cirkeldiagram och andra är ett perfekt sätt att lägga till data vackert med ditt innehåll. I den här artikeln visar vi hur du skapar staplar och diagram i WordPress med Visualizer WordPress Charts och Graphs plugin.

Problemet med barer och diagram i WordPress

Det finns många WordPress-plugins för att lägga till barer, diagram och diagram med ditt innehåll. Men den vanligaste klagomålet vi har hört av våra användare är att dessa plugins oftast är för komplicerade att använda.

Några av dessa plugins hoppas även att användarna ska lägga till data i en kortnummer i extremt komplicerade format.

I stället för att använda dessa plugins, slutar många användare skapa diagram i sina kontorsprogram och konvertera dem till en bild.

Detta kan fungera om du planerar att aldrig ändra det. En bild är dock inte ett alternativ till ett interaktivt diagram där användbar data visas när användaren tar musen över ett visst avsnitt.

En idealisk diagram och graflösning kan ge dig möjlighet att:

• Lägg till data från en datakälla på datorn eller på webben.
• Populera diagram, pajer, grafer och staplar med dina data.
• Skapa vackra, interaktiva, färgstarka och mobila vänliga diagram.
• Viktigast, det borde låta dig uppdatera data närhelst du vill.

Med detta sagt, låt oss se hur Visualizer WordPress Charts and Graphs plugin hjälper dig att göra allt detta.

Skapa barer och diagram i WordPress med Visualizer

Det första du behöver göra är att installera och aktivera Visualizer WordPress Charts and Graphs-plugin. För mer information, se vår steg för steg guide om hur du installerar ett WordPress-plugin.

Medan den fria versionen gör nästan allt du behöver, har de också Visualizer Charts och Graphs Pro som lägger till ytterligare funktioner i pluginet, t.ex. att lägga till data direkt med ett kalkylblad som gränssnitt och importera data från andra diagram.

Det kostar $ 79 för en enda webbplatslicens med ett års professionellt stöd och uppdateringar.

Notera: Denna handledning handlar om den fria versionen av plugin.

Vid aktivering måste du besöka Media »Visualizer Library sida. Här visas alla dina diagram och diagram.

Du måste klicka på Lägg till ny knapp för att lägga till ditt första diagram.

Detta kommer att ge ett popup-fönster på skärmen. Du kommer att se olika diagramtyper tillgängliga med plugin. Välj bara den diagramtyp du vill lägga till och klicka på nästa knapp för att fortsätta.

Nästa steg är att lägga till din datakälla i ett CSV-format. Om du har sparat dina data som kalkylblad med hjälp av Excel, Google Plattor eller något annat program kan du helt enkelt exportera det som CSV-fil.

Du kan ladda ner eller spara din CSV-fil till din dator och sedan ladda upp den genom att klicka på knappen "Från dator".

Din CSV-fil måste ha kolumnnamn i första raden och datatyp i den andra raden. Plugin stöder dessa datatyper: sträng, nummer, booleansk, datum, tidpunkt och tid på dagen.

Ta en titt på den här exempelfilen som vi har skapat i Google Sheets.

Om du skapar en CSV-fil med en textredigerare, ta en titt på det här exemplet CSV-filen:


Webbläsare, besökare
sträng, siffror
Chrome, 7894
Firefox, 6754
Internet Explorer, 4230
Safari, 2106
Opera, 627


Lägga till en bild i WordPress Använda Google Drive-kalkylblad

Om du har diagramdata sparad som ett kalkylblad på Google-enheten kan du lägga till det i diagrammet utan att exportera det.

Öppna din datafil i Google Spreadsheets och klicka sedan på Fil »Publicera på webben.

Detta kommer att ge upp en popup där du måste välja hur du vill publicera detta dokument. Du måste välja Kommaseparerade värden (.csv) i rullgardinsmenyn.

Glöm inte att klicka på "Publicera" -knappen.

Du kommer nu att se den allmänt tillgängliga URL-en för ditt ark som en CSV-fil. Du måste kopiera den här webbadressen och gå tillbaka till Visualizer-diagrammet.

Klicka på knappen Från webben och ange sedan webbadressen till ditt Google-kalkylblads csv-fil.

Så snart du anger webbadressen hämtar plugin din CSV-fil och visar en live förhandsvisning av diagrammet.

Du kan nu klicka på skapa diagramknappen för att spara diagrammet.

Lägga till ett diagram eller en graf i WordPress-inlägg / sidor

Att lägga till ett diagram eller ett diagram på dina WordPress-inlägg och sidor är lika enkelt som att lägga till bilder.

Skapa en ny post / sida eller redigera en befintlig plats där du vill lägga till diagrammet. På redigeringsskärmen klickar du på knappen Lägg till media ovanför postredigeraren.

Detta kommer att föra upp WordPress Media Upload popup. Du måste klicka på fliken visualiseringar i den vänstra kolumnen. Det laddar alla diagram som du har skapat och sparat på den här sidan.

Klicka på insättningsikonen nedanför diagrammet. Popupen försvinner och du kommer att se ditt diagram läggas till i ditt WordPress-brev som en kortnummer.

Du kan nu spara ditt WordPress-inlägg eller -sida och besöka din webbplats för att se diagrammet inbäddat i ditt WordPress-inlägg.

Redigera dina Visualizer-diagram i WordPress

Du kan när som helst redigera och ändra dina diagram. Helt enkelt besök Media »Visualizer Library sida. Därifrån kan du klona ett diagram, radera det eller redigera dess visuella inställningar.

Uppdatering av data för ett befintligt diagram utan att ändra diagrammet är ganska enkelt med Visualizer.

Om du har lagt till data från ett Google-kalkylblad behöver du bara uppdatera data i kalkylbladet och gå till Fil »Publicera på webben och publicera ditt kalkylblad. Dina ändringar kommer automatiskt att återspeglas i ditt diagram.

Å andra sidan, om du laddar upp en CSV-fil, måste du uppdatera CSV-filen på din dator. När du är klar väljer du diagrammet som du vill uppdatera och klickar på länken Redigera nedanför diagrammet.

Ladda upp din nya CSV-fil i filen Upload CSV-fil. Ändringar i data kommer automatiskt att återspeglas i inlägg eller sidor där du har lagt in det diagrammet.

Lägga till en bild i en WordPress Sidebar Widget

Visualizer använder kortkoder för att infoga diagram. Helt enkelt gå till Media "Visualizer Library, där ser du en kortnummer nedanför dina diagram.

Kopiera kortnummer och gå till Utseende "Widgets. Dra och släpp en textgränssnitt till ditt sidofält och klistra in kortkoden i widgeten.

Om kortkoden inte fungerar i textdisplayen, kolla sedan vår guide om hur du använder kortkoder i WordPress-sidbalk widgets.

Vi hoppas att den här artikeln hjälper dig att lägga till barer och diagram i din WordPress-webbplats. Du kanske också vill se vår lista med 24 måste ha WordPress-plugins för företagswebbplatser

Om du gillade den här artikeln kan du prenumerera på vår YouTube-kanal för WordPress-videoinstruktioner. Du kan också hitta oss på Twitter och Facebook.