Beste WordPress-plugins for å lage dynamiske diagrammer og grafer

WordPress-tilbud


Hvis du vil legge til ekstra troverdighet til innleggene dine, jo mer data du kan gi, desto bedre.

Dette reiser imidlertid spørsmålet om hvordan man best kan presentere disse dataene. Uendeløst å oppgi tall og statistikk gjør det vanskelig for brukere å forstå budskapet ditt, og selvfølgelig er det kjedelig! De fleste finner data lettere å fordøye når de presenteres i et visuelt format, for eksempel grafer og diagrammer.

Til tross for det løftet det gir autoritet og troverdighet, er det å legge til visuelle data i innleggene, grafer og diagrammer de fleste webansvarlige overser. Når du ser en graf, er det vanligvis bare et bilde som er satt inn, snarere enn et dynamisk.

Nå bruker du et bilde fremdeles meldingen din, og det er bra hvis du aldri planlegger å oppdatere dataene dine. Men hvis tall kan endres, eller du planlegger å legge til de siste tallene når og når de blir tilgjengelige, vil denne taktikken ganske enkelt ikke fungere. For dette må du lage en dynamisk graf.

Heldigvis er det en rekke fantastiske plugins tilgjengelig for å forenkle prosessen med å lage flotte, dynamiske grafer og diagrammer. Hvis du leter etter en måte å øke salget ved å inkludere data for å sikkerhetskopiere banen din, kan du sjekke ut disse.

1. WordPress-diagrammer – GRATIS

WordPress Charts er en brukervennlig kartløsning som er gratis å laste ned. Den bruker Chart.js og HTML5 for å lage animerte diagrammer.

Seks diagrammer er tilgjengelige: Kakediagram, donutdiagram, polart områdekart, søylediagram, linjediagram og radarkart, og du kan sette dem inn på nettstedet ditt ved hjelp av kortkoder eller via en widget.

Du finner snarveggkodeområdet under Media-menyen i WordPress-administratorområdet. Et eksempel kortkode er gitt for hver type diagram, og under er en liste over dusinvis av kortkodeattributter som kan brukes til å lage diagrammer.

WordPress Charts Shortcodes

Diagrammer ser fantastiske ut: De lastes raskt og animeres når de først lastes inn, slik at siden din ser veldig profesjonell ut.

For å endre ethvert aspekt av diagrammet ditt, trenger du ganske enkelt å endre verdiene og attributtene i kortkoden.

WordPress Charts Polar Area Chart

Hvis du leter etter en enkel kartløsning, er WordPress Charts et godt alternativ, ettersom det gjør å legge til grunndiagrammer til en lek.

De av dere som er ute etter å legge til mer komplekse diagrammer, kan finne på at kodenummer-systemet og mangelen på alternativer er litt frustrerende, så jeg anbefaler å se etter en mer avansert løsning.

Last ned / offisiell webside

2. Visualizer – GRATIS / £ 57-pluss

Visualizer er en allsidig diagrammer og tabellløsninger fra ThemeIsle.

I gratisversjonen kan du lage tabeller, kakediagrammer, linjediagrammer, områdekart, geografiske diagrammer, søylediagrammer, kolonnediagrammer og spredekart.

Hvis du bruker WordPress classic editor, ser du en knapp for Visualizer på verktøylinjen; når Gutenberg brukes, vil Visualizer være tilgjengelig i hovedblokkmenyen. Forsikre deg om at Visual Editor-modus er valgt i begge oppsettene for å se Visualizer-knappen.

Visualizer

Dessverre, da Gutenberg ble brukt, klarte jeg ikke å lage et nytt diagram. Jeg måtte bytte til Classic Editor for å se tilgjengelige diagrammer.

Merkelig kan du sette inn diagrammer du opprettet tidligere når Gutenberg er aktivert – du kan bare ikke lage nye.

Gutenberg i Visualizer

Ved å bytte til Classic Editor kan du se alle kartalternativer – inkludert premiumdiagramalternativer som ikke er tilgjengelige i gratisversjonen.

Alternativer for visualiseringsdiagram

Data kan lastes opp for tabellen eller diagrammet fra en CSV-fil. Du kan laste opp dette direkte eller importere fra en URL.

Visualizer kolonnediagram

En premiumversjon av Visualizer er tilgjengelig fra £ 57 per år. Den legger til ytterligere fire karttyper: måler, lysestake, tidslinje og kombinasjonsboksen.

En av de kuleste funksjonene i premiumversjonen er muligheten til å lage diagrammer fra innlegg, sider og andre tilpassede innleggstyper. Ytterligere alternativer blir gjort tilgjengelig for diagrammer, og det gir funksjonalitet til å lage private diagrammer, og for brukere å redigere diagrammer.

Mens premiumversjonen av Visualizer legger til mange nyttige alternativer, mistenker jeg at de fleste WordPress-brukere vil være fornøyd med funksjonene som er tilgjengelige i gratisversjonen..

Last ned / offisiell webside

3. Lettdiagrammer – GRATIS

Easy Charts er en gratis kartløsning som ble utviklet ved å bruke uvCharts Javascript-biblioteket.

Totalt 12 karttyper er tilgjengelige: søylediagram, stablet søylediagram, trapp opp søylediagram, prosent søylediagram, områdekart, stablet områdekart, prosent områdekart, linjediagram, kakediagram, donut diagram, polar områdekart og foss diagram.

Diagrammer legges til som en tilpasset innleggstype, og du legger til data gjennom en tabell som kan tilpasses, slik at du enkelt kan endre tall. Kolonner og rader kan legges til ved å klikke på en knapp.

En kortkode vises for diagrammet. Men hvis du foretrekker det, kan du sette inn diagrammer med knappen Easy Charts fra redigeringssiden, og bare velge det du vil sette inn.

Legge til data i enkle diagrammer

Så lenge du har lagret dataene dine, vil du kunne se en forhåndsvisning av diagrammet.

Ved å endre diagramtypen i konfigurasjonsområdet og deretter lagre diagrammet igjen, kan du se hvordan dataene dine ser ut i alle 12 diagramtyper.

Forhåndsvisning av diagram

Antall tilpasningsalternativer som er tilgjengelige i Easy Charts, er utrolig. Alle aspekter av diagrammet ditt kan endres – enten det er styling, marginer, etiketter, typografi eller bildetekster.

Kartkonfigurasjon

Det er ingen generelle innstillingsområder tilgjengelig for enkle diagrammer, men det er en informasjonsside som inneholder funksjoner som for eksempel muligheten for brukere å laste ned diagrammer som bilder.

Med et massevis av alternativer, 12 karttyper og flere ferdiglagde fargevalg, er Easy Charts et godt valg.

Last ned / offisiell webside

4. WordPress-grafer & Diagrammer – GRATIS

Utviklet ved hjelp av HTML5, Vue.js Javascript framework og Chart.js, WordPress Graphs & Diagrammer er en enkel løsning som støtter åtte karttyper.

De tilgjengelige karttypene er kakediagram, smultringskart, polarkart, søylediagram, linjediagram, radarkart, bobleplan og spredningskart.

Hvis den klassiske redigereren er aktivert, ser du en knapp for å sette inn graf i redigeringsverktøylinjen. Dessverre, når Gutenberg er aktiv, er det ingen blokkering tilgjengelig for WordPress Graphs & Diagrammer. Dette er åpenbart et problem som må løses, siden Gutenberg er aktiv som standard i WordPress nå.

WordPress grafer og diagrammer-knapp

Når du klikker på knappen “Sett inn graf”, vil du bli invitert til å legge til en graf. Du kan deretter velge hvilken type graf du vil bruke.

Velge et diagram

Jeg elsker hvordan plugin-modulen lar deg legge til data i et diagram. Hver gang du legger til data, definerer etiketter eller endrer farger, oppdateres endringene øyeblikkelig i forhåndsvisningen av diagrammet på høyre side. I denne forbindelse fungerer det på lignende måte som WordPress-tilpasseren.

Når du er ferdig, vil diagrammet settes inn i innholdsområdet ditt via en kortkode. Du kan når som helst gå tilbake og redigere diagrammer ved å klikke på knappen “Sett inn graf” igjen. Der vises en liste over opprettede diagrammer.

Polar Chart

WordPress-grafer & Diagrammer er et godt alternativ til WordPress Charts. Det er en grunnleggende plugin som ikke lar deg endre type diagrammer du har opprettet, og det lar deg heller ikke laste opp data via CSV-filer.

Til tross for disse begrensningene, er det enkelt å anbefale WordPress Graphs & Diagrammer for alle som bare vil legge til enkle diagrammer og grafer til innholdet. Forhåpentligvis vil de legge til støtte for Gutenberg i fremtiden.

Last ned / offisiell webside

5. Responsive Charts – $ 16

Responsive Charts er en rimelig kartløsning som lar deg lage syv animerte diagramtyper.

Alle diagrammer opprettes ved hjelp av Charts.js. De syv karttypene er kakediagram, smultringskart, søylediagram, linjediagram, polarkart, radarkart og bootstrap fremdriftslinjer.

Diagrammer kan settes inn i innholdet ditt ved hjelp av kortkoder, eller direkte i sidemaler ved hjelp av PHP. I området med innstillinger for kart kan du navngi kartet, velge karttypen og definere bredden på kartet.

Det er et stort stilinnstillingsområde med flere titalls alternativer. Herfra kan du endre marginer, polstring, typografi og farger.

Kartinnstillinger og stilinnstillinger

Data kan settes inn manuelt nederst på siden i flere datasett.

Hvis du foretrekker det, kan du laste opp data direkte via en CSV-fil. En CSV-mal er gitt for å hjelpe deg med å se hvordan dataene kan organiseres før de lastes opp.

Datasett

Dessverre er det ingen måte å forhåndsvise diagrammet mens du oppretter det. Du må sette inn kortkoden i innholdsområdet for å forhåndsvise den og se endringene du har gjort.

Heldigvis ser diagrammene som er satt inn på nettstedet ditt bra.

Eksempler på responsive diagrammer

Selv om det ikke er gratis å laste ned, er $ 16 Responsive Charts en ganske rimelig løsning. Den har mange nyttige stylingsalternativer, og lar deg laste opp store datamengder ved hjelp av CSV-filer.

Sørg for å sjekke admin demo av Responsive Charts for å få en bedre forståelse av hva plugin kan gjøre.

Last ned / offisiell webside

6. AmCharts: Diagrammer og kart – GRATIS

Sammenlignet med de andre programtilleggene i denne artikkelen, er amCharts: Diagrammer og kart mer rettet mot avanserte WordPress-brukere enn nybegynnere. Plugin-en ble utviklet av kartene og kartene Javascript-tjenesten, amCharts.

Ni typer diagrammer er tilgjengelige: XY-diagram, kakediagram, skiver, diagrammer, radarkart, målekart, akkorddiagram, trekart og kart.

I området for innstillinger for programtillegg kan du velge om ressursene skal lagres eksternt eller lokalt. Du kan også legge til tilpassede ressurser i den eksisterende omfattende listen over Javascript-biblioteker.

amCharts-innstillinger

For hver type diagram kan du definere standard ressursbibliotekene for Javascript, HTML og Javascript som brukes. Disse innstillingene vil bli brukt som utgangspunkt for det nye diagrammet du velger. Du kan deretter endre dataene som det passer seg.

AmCharts Chart Standarder

Når du vet hvordan det fungerer, vil du sette pris på hvor kraftige amCharts kan være.

Du kan når som helst endre et diagram fra en type til en annen, men vær oppmerksom på at når du gjør dette, vil alle dataene i ressursboksen, HTML-boksen og Javascript-boksen gå tilbake til innstillingene du definerte på hovedinnstillingssiden for plugin-innstillinger for den aktuelle karttypen.

Sankey Diagram

Sjekk ut amCharts: Diagrammer og kart hvis du er en avansert bruker som ønsker mer kontroll over Javascript-bibliotekene som brukes.

Hvis du bruker hovedtjenesten amCharts, bør du også sjekke amCharts Embed WordPress-plugin fra Rami Yushuvaev, som lar deg legge inn diagrammene du har opprettet med pluginen.

Last ned / offisiell webside

7. M-diagram – GRATIS

M Chart er et gratis WordPress-plugin som lar deg bruke Chart.js eller Highcharts-biblioteker.

På siden med generelle innstillinger kan du bestemme om diagrammer forhåndsvises, og om ekstern innebygging av diagrammer er tillatt.

Bare fire diagramtyper er tilgjengelige: Linjediagram, kolonnediagram, søylediagram og kakediagram.

M Chart Innstillinger

Data kan enkelt inkluderes i diagrammet ved å legge til verdiene dine i en tabell. Du dobbeltklikker på en celle og skriver inn dataene dine.

Hvis du foretrekker det, kan du laste opp data ved hjelp av en CSV-fil.

Det er også et alternativ å eksportere kartdata til en CSV-fil. Dette er en flott funksjon, og noe som mangler fra de fleste andre diagramtillegg.

M kartdata

En forhåndsvisning av diagrammet vises under dataseksjonen. Når du endrer diagramtypen i seksjonen under forhåndsvisningsområdet, oppdateres forhåndsvisningen automatisk.

Forhåndsvisning av M Chart

Høyden på kartet ditt kan defineres, og du kan velge å vise en legende.

For hver akse legger du til en tittel og velger en enhet. Du kan velge blant dusinvis av typer enheter, inkludert avstand, valuta, trafikk på nettet og mer.

M Chart Data Settings

M Chart er en flott gratis kartløsning. Det er enkelt å legge til data og sette inn komplette diagrammer i innholdet ditt ved hjelp av snarvekoder.

Jeg føler imidlertid at ettersom det bare har fire typer, kan det være lurt å se på noen alternative kartløsninger først.

Last ned / offisiell webside

8. UberChart – $ 30

UberChart, som detaljhandler til $ 30, er en avansert kartløsning som tilbyr 240 valgfrie alternativer per diagram og 30 tilpassbare alternativer per datasett.

Totalt ti karttyper er tilgjengelige: Linjediagrammer, områdekart, søylediagrammer, horisontale søylediagrammer, kakediagrammer, donutdiagrammer, radarkart, polarområdekart, spredekart og bobeldiagrammer.

Alle diagrammer du oppretter, kan enkelt endres senere ved å klikke på en knapp. Du kan også duplisere diagrammer og bruke dem som mal for nye diagrammer.

Eksisterende diagrammer

Data kan importeres via en CSV-fil eller kopieres og limes direkte inn i dataområdet fra regnearkprogramvare som Excel.

Det er mange stylingalternativer, inkludert polstring, marginer, farger, radiuslengde og mer. En forhåndsvisning av diagrammet vises i hjertet av innstillingssiden.

Opprette et nytt diagram

Mange brukere vil bare bruke standard stylingoppsettet, men hvis du vil tilpasse diagramdesignene dine, kan du endre alt fra verktøytips og titler til diagramlegender.

Rutenettlinjeinnstillinger

Med hundrevis av alternativer, et godt utvalg av diagramtyper, og støtte for flere språk og WordPress multisite, er UberChart en av de beste kartløsningene tilgjengelig i dag.

Ta en titt på UberChart-eksempler-siden for å se kvaliteten på diagrammer og grafer som kan opprettes ved hjelp av plugin-modulen.

Last ned / offisiell webside

9. WP-diagrammer og grafer – GRATIS

Sist på vår liste er gratis plugin WP-diagrammer og grafer. Denne grunnleggende plugin støtter seks karttyper: Kakediagram, polarkart, doughnutsdiagram, linjediagram, søylediagram og radarkart.

Alt du trenger å gjøre er å legge til titler og tilhørende data, og klikk deretter på genereringsknappen.

WP-diagrammer og grafer

Når du klikker på genereringsknappen, vises en forhåndsvisning av diagrammet ved siden av kortkoden du trenger å sette inn på siden din for å vise diagrammet.

Du kan gjøre raske redigeringer av diagrammet senere ved å endre verdiene i kortkoden.

Forhåndsvisning av WP-diagrammer og grafer

WP-diagrammer og -grafer er uten skam grunnleggende. Det er ingen spesielle innstillingsside, ingen side som viser tidligere opprettede diagrammer og ingen måte å endre fargene som brukes.

Hvis du kan godta det begrensede sett med tilpasningsalternativer som tilbys, vil du sette pris på hvor raskt og enkelt plugin-modulen er å bruke.

Last ned / offisiell webside

Hederlige nevner

En rekke WordPress-plugins kom ikke til å bli inkludert i denne listen.

Selv om jeg anser at programtilleggene som er nevnt ovenfor, generelt sett er bedre, setter jeg pris på at alles situasjon er annerledes, så det kan være lurt å se på noen av løsningene som ikke gjorde kuttet.

Diagrammer Ninja og Infogram er to løsninger du kanskje vil sjekke ut. De gjorde ikke det endelige kuttet fordi du må registrere deg på en ekstern tjeneste for å bruke dem.

Jeg tror det er bedre å lagre diagrammer i din egen WordPress-database, så jeg var motvillig til å inkludere enhver løsning som var avhengig av at en tredjepartstjeneste skal fungere. Hvis du ikke har noe imot å bruke en ekstern tjeneste, anbefaler jeg at du sjekker dem ut.

Diagrammer Ninja

En WordPress-plugin jeg likte var iChart. Det er en enkel kartløsning som tilbyr seks karttyper: Linjediagrammer, søylediagrammer, radarkart, polarområdekart, kakediagrammer og donutdiagrammer.

En annen anstendig løsning er Chartli. Detaljhandel til $ 25, det er en av de mest stilfulle plugins for diagrammer og grafer som er tilgjengelige for WordPress, og har 15 karttyper.

Dessverre tillater ingen av disse programtilleggene å redigere diagrammer eller grafer etter at du har opprettet dem, og du kan ikke engang endre data via kortkoden.

På grunn av dette er det vanskelig å anbefale dem, da feil uunngåelig vil skje i løpet av kartopprettelsesfasen.

Opprette et diagram i iChart

Hvis du bruker Gravity Forms, sjekk ut MaxiCharts. Programtillegget kan brukes til å lage diagrammer fra skjemainnleveringer og CSV-filer.

Blazing Charts-pluginen lar deg lage kartkodebiter fra populære Javascript-biblioteker. Avanserte brukere kan synes dette er nyttig, men det er ikke brukervennlig for nybegynnere eller mellombrukere.

Hvis du først og fremst ønsker å lage tabeller og deretter komplettere dem med diagrammer og grafer, er det noen få alternativer tilgjengelig.

TablePress, som er den mest populære tabelløsningen for WordPress, har en tilgjengelig utvidelse kalt Chart Extension som bruker Chartist.js for å lage responsive diagrammer fra tabellene dine..

Den pro versjonen av Data Tables Generator av Supsystic, som går tilbake fra $ 39, legger til muligheten til å lage diagrammer og diagrammer fra tabeldataene dine. Det er en effektiv måte å forbedre de eksisterende tabellene dine.

Siste tanker

Jeg oppfordrer deg til å prøve diagrammer og grafer-plugins som er detaljert i denne artikkelen, og jeg er ikke i tvil om at du vil bli overrasket over hvor enkle de er å bruke.

Hvis du leter etter en måte å legge til grunnleggende diagrammer og grafer på nettstedet ditt, anbefaler jeg å bruke enten WordPress-diagrammer, WordPress-grafer & Diagrammer eller WP-diagrammer og grafer.

Visualizer er lett å anbefale også. Det er like enkelt å bruke som løsningene nevnt over, men lar deg også importere data via CSV-filer.

Avanserte brukere vil finne amCharts: Diagrammer og kart nyttige, men andre bør unngå det.

Hvis tilvalg og stylingtilpasning er en prioritet for deg, anbefaler jeg å bruke Easy Charts eller UberChart. Siden Easy Charts er 100% gratis å laste ned og bruke, er det den jeg vil oppfordre deg til å se på først.

Gjør så mye testing som mulig før du velger en løsning for ditt live nettsted. For å hjelpe deg med dette, anbefaler jeg at du søker etter nettsteder som tilbyr eksempelvis CSV-filer. Disse eksempelfilene kan hjelpe deg med å fylle ut tabeller og diagrammer med prøveinformasjon for å få en bedre forståelse av hva programtilleggene kan gjøre.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map