Wordpress og webutvikling

Legg til grafer til PHP webapp med pChart

Legg til grafer til PHP webapp med pChart / Wordpress og webutvikling

pChart er et bemerkelsesverdig avansert grafikkverktøy for PHP. Det er gratis under GPL-lisens, svært tilpassbar, fullt objektorientert, og mer enn i stand til å håndtere data du kaster på den. La meg vise deg hvordan du kommer i gang med å bruke den til din webapp.

Denne opplæringen antar en grunnleggende kunnskap om PHP.

Funksjoner - Kort oversikt

  • Lett å komme i gang med tonnevis av eksempelkoden.
  • Anti-Aliasing for vakre grafer.
  • Hver type graf du muligens kan forestille deg, så vel som innfødte tegningsrutiner for å tilpasse skjermen enda mer. (3D-grafer er imidlertid begrenset til diagrammer)
  • Best-fit linje beregning - bare gi det datapunkter og la det gjøre arbeidet.
  • Kan også opprette strekkoder, som om grafing ikke var nok. (Ikke QR-koder skjønt, bare standard 1-dimensjonale)
  • Betinget formatering, for å lage virkelig visuelt tiltalende grafer.
  • Omfattende caching klasse for å øke hastigheten på grafikken i et produksjonsmiljø.

Starter

Last ned den nyeste pChart-pakken og last den opp til roten til webserveren din. Gi nytt navn direkte til pChart. Du kan teste det ut med en gang ved å navigere til denne katalogen som vil laste eksempelgrafer.

Prøv det selv

For å lære den grunnleggende metoden for å tegne en graf, opprett en ny PHP-fil i roten til serveren din test.php. Legg disse linjene til toppen (antar katalogen du laster opp pChart for å bare kalt pChart):

/ * Inkluder alle klassene * / include ("pChart / class / pDraw.class.php"); omfatte ( "pChart / klasse / pImage.class.php"); omfatte ( "pChart / klasse / pData.class.php");

Det neste trinnet er å opprette et datasett, og bruk addPoints-metoden.

/ * Opprett datasettobjektet ditt * / $ myData = ny pData (); / * Legg til data i datasettet * / $ myData-> addPoints (array (VOID, 3,4,3,5));

Legg merke til at du kan bruke en TOMROM Søkeord hvis data mangler. Du kan også koble til en MySQL datakilde og trekk en rekke data derfra, eller Last inn en CSV-fil fra et sted. Vi skal tegne en veldig enkel grafikk av kurs, men du kan også legge til flere datasett, justere ticks etc på dette punktet.

Deretter må du opprette bildeobjektet, sette grafenområdet og velge en skrift.

$ myPicture = ny pImage (700,230, $ myData); // bredde, høyde, datasett $ myPicture-> setGraphArea (60,40,670,190); // x, y, bredde, høyde $ myPicture-> setFontProperties (array ("FontName" => "pChart / fonts / verdana.ttf", "FontSize" => 11));

Skalaen må da beregnes før utdata - men dette kan gjøres automatisk - deretter tegne grafen slik:

$ MyPicture-> drawScale (); $ MyPicture-> drawSplineChart ();

I dette tilfellet tegner vi et spline-diagram - i utgangspunktet et buet linjediagram - men det er en stor liste over andre diagrammer du kan tegne bare ved å endre denne funksjonen. Det aller siste skrittet er å sende den resulterende PNG-filen til nettleseren. Bruke Slag () funksjon for å gjøre dette:

$ MyPicture-> Stroke ();

Du vil bruke dette i tilfeller der du enten viser direkte til brukeren, eller innebygger PHP som fil som et bilde, som:

Hvis du laster inn test.php i nettleseren din, bør du se noe som ligner på dette:

Et annet alternativ er å gjøre grafen til en fil hvis du genererer dem gjennom en slags automatisert CRON-jobb, for eksempel. I så fall bruk (hvor banen til bildet er i forhold til test.php og i en skrivebar mappe):

$ MyPicture-> render ( "mypic.png");

Alternatives

Selv om pChart er det mest omfattende kartleggingsverktøyet for PHP langt, er det noen alternativer:

  • SparkLine PHP er en implementering av de særegne lille grafene som er oppkalt av Edward Tuffte.
  • JqPlot er en jQuery-basert grafikkløsning, som ville skifte grafikkberegningen til brukerens nettleser i stedet for serveren din, ideell hvis du prøver å plotte matematiske funksjoner.
  • PHPMyGraph er ikke så omfattende, tilpassbar eller attraktiv som pChart, men det er også mye enklere.
  • EasyChart Builder er et enkelt WordPress-plugin, men dette krever at datasettet ditt legges til manuelt.
  • Google Image Chart Creator har et bredt utvalg av grafer og kan enkelt legges inn, men krever også at du manuelt skriver inn datasettet.
Det er det fra meg denne gangen, jeg håper du har et spill med pChart i webapps du gjør. Jeg har nettopp begynt å jobbe med det på websiden av Egg Counter iPhone-applikasjonen min, så jeg er absolutt ingen ekspert på det ennå. Jeg vil prøve å peke deg i riktig retning hvis du har noen spørsmål, men det er også omfattende dokumentasjon tilgjengelig. Har du en bedre måte å grafisere data i webappene dine? Gi oss beskjed!