Slik lager du barer og diagrammer i WordPress med Visualizer

Slik lager du barer og diagrammer i WordPress med Visualizer / WordPress Plugins

Vil du legge til barer og diagrammer i WordPress? Visuelle hjelpemidler som graf, barer, kakediagram og andre er en perfekt måte å legge til data vakkert med innholdet ditt. I denne artikkelen vil vi vise deg hvordan du lager barer og diagrammer i WordPress med Visualizer WordPress Charts og Graphs plugin.

Problemet med barer og diagrammer i WordPress

Det er mange WordPress-plugins for å legge til barer, diagrammer og grafer med innholdet ditt. Den vanligste klagen vi har hørt fra brukerne er imidlertid at disse pluginene vanligvis er for kompliserte å bruke.

Noen av disse pluginene forventer selv at brukere skal legge til data i en kortkode i ekstremt kompliserte formater.

I stedet for å bruke disse pluginene, oppnår mange brukere å lage et diagram i deres kontorprogrammer og konvertere dem til et bilde.

Dette kan fungere hvis du planlegger å aldri endre det. Imidlertid er et bilde ikke noe erstatning for et interaktivt diagram hvor nyttige data vises når brukeren tar musen over en bestemt seksjon.

Et ideelt diagram og en grafløsning vil tillate deg å:

  • Legg til data fra en datakilde på datamaskinen eller på nettet.
  • Populere diagrammer, paier, grafer og barer ved hjelp av dataene dine.
  • Lag vakre, interaktive, fargerike og mobile vennlige diagrammer.
  • Viktigst av alt, det burde la deg oppdatere dataene når du vil.

Når det er sagt, la oss se hvordan Visualizer WordPress Charts and Graphs plugin hjelper deg med å gjøre alt det.

Opprette barer og diagrammer i WordPress med Visualizer

Første du trenger å gjøre er å installere og aktivere Visualizer WordPress Charts and Graphs plugin. For mer informasjon, se vår trinnvise veiledning om hvordan du installerer et WordPress-plugin.

Mens den gratis versjonen gjør nesten alt du trenger, har de også Visualizer Charts og Graphs Pro som legger til flere funksjoner i pluginet, for eksempel å legge til data direkte ved hjelp av et regneark som grensesnitt og importere data fra andre diagrammer.

Det koster $ 79 for en enkelt nettstedslisens med ett års profesjonell støtte og oppdateringer.

Merk: Denne opplæringen handler om den gratis versjonen av plugin.

Ved aktivering må du besøke Media »Visualizer Library side. Her vises alle diagrammer og grafer.

Du må klikke på Legg til ny knapp for å legge til ditt første diagram.

Dette vil gi opp et popup-vindu på skjermen. Du vil se forskjellige karttyper tilgjengelig med plugin. Bare velg diagramtypen du vil legge til, og klikk på neste knapp for å fortsette.

Det neste trinnet er å legge til datakilden i et CSV-format. Hvis du har lagret dataene dine som regneark ved hjelp av Excel, Google Sheets eller et annet program, kan du bare eksportere det som CSV-fil.

Du kan laste ned eller lagre CSV-filen til datamaskinen din og deretter laste den opp ved å klikke på knappen 'Fra datamaskin'.

Din CSV-fil må ha kolonnens navn i den første raden og datatypen i den andre raden. Pluggen støtter disse datatyper: streng, nummer, boolean, dato, klokkeslett og tidspunkt på dagen.

Ta en titt på dette eksemplet filen vi har opprettet i Google Sheets.

Hvis du lager en CSV-fil ved hjelp av et tekstredigeringsprogram, kan du se på dette eksempelet CSV-filen:


Nettleser, besøkende
streng, nummer
Chrome, 7894
Firefox, 6754
Internet Explorer, 4230
Safari, 2106
Opera, 627

Legge til et diagram i WordPress Bruke Google Drive-regneark

Hvis du har diagramdata lagret som et regneark på Google-stasjonen, kan du legge det til i diagrammet uten å eksportere det.

Åpne datafilen din i Google Regneark, og klikk deretter på Fil »Publiser til nettet.

Dette vil gi opp en popup der du må velge hvordan du vil publisere dette dokumentet. Du må velge Kommaseparerte verdier (.csv) fra rullegardinmenyen.

Ikke glem å klikke på "Publiser" -knappen.

Du vil nå se den offentlig tilgjengelige nettadressen til arket ditt som en CSV-fil. Du må kopiere denne nettadressen og gå tilbake til Visualizer-diagrammet.

Klikk på Fra web-knappen og skriv deretter inn nettadressen til Google-regnearkets csv-fil.

Så snart du skriver inn nettadressen, henter pluggen din CSV-fil og viser et live forhåndsvisning av diagrammet ditt.

Du kan nå klikke på opprett diagramknappen for å lagre diagrammet ditt.

Legge til et diagram eller en graf i WordPress-innlegg / sider

Å legge til et diagram eller en graf på WordPress-innleggene og sidene dine er like enkelt som å legge til bilder.

Opprett et nytt innlegg / en side eller rediger en eksisterende der du vil legge til diagrammet. På redigeringsskjermbildet klikker du på knappen Legg til medie over postredigeringsprogrammet.

Dette vil hente opp WordPress Media Upload popup. Du må klikke på fanen visualiseringer fra venstre kolonne. Det laster alle diagrammer du har opprettet og lagret på dette nettstedet.

Klikk på innsatsikonet under diagrammet ditt. Popupen vil forsvinne, og du vil se diagrammet ditt lagt til WordPress-innlegget ditt som en kortkode.

Du kan nå lagre ditt WordPress-innlegg eller -side og besøke nettstedet ditt for å se diagrammet som er innebygd i ditt WordPress-innlegg.

Redigere Visualizer-diagrammer i WordPress

Du kan redigere og endre diagrammer når som helst. Bare besøk Media »Visualizer Library side. Derfra kan du klone et diagram, slette det eller redigere visuelle innstillinger.

Oppdatering av data for et eksisterende diagram uten å endre diagrammet er ganske enkelt med Visualizer.

Hvis du har lagt til data fra et Google-regneark, er alt du trenger å gjøre oppdatering av data i regnearket ditt og gå til Fil »Publiser til nettet og publiser regnearket ditt på nytt. Endringene dine reflekteres automatisk i diagrammet.

På den annen side, hvis du laster opp en CSV-fil, må du oppdatere CSV-filen på datamaskinen. Når du er ferdig, velg diagrammet du vil oppdatere og klikk på rediger lenken under diagrammet.

Last opp CSV-filen i Last opp CSV-fil-delen. Endringer i dataene reflekteres automatisk i innlegg eller sider der du har satt inn diagrammet.

Legge til et diagram i en WordPress Sidebar Widget

Visualizer bruker kortkoder for å sette inn diagrammer. Bare gå til Media "Visualizer Library, der vil du se en shortcode under diagrammer.

Kopier kortnummeret og gå til Utseende "Widgets. Dra og slipp en tekst-widget til sidebjellet og lim inn koden i widgeten.

Hvis kortnummeret ikke fungerer i tekstdisplayet, må du sjekke ut vår guide for hvordan du bruker kortkoder i WordPress sidebar-widgets.

Vi håper at denne artikkelen hjalp deg med å legge til barer og diagrammer på WordPress-siden din. Du vil kanskje også se vår liste over 24 må ha WordPress-plugins for Business-nettsteder

Hvis du likte denne artikkelen, vennligst abonner på vår YouTube Channel for WordPress-videoopplæringsprogrammer. Du kan også finne oss på Twitter og Facebook.