Când lucrați cu aplicații cu intensitate mare de date, un dezvoltator trebuie să facă deseori mai mult decât să arate liste de înregistrări de date într-o vizualizare de tabel. Biblioteca CorePlot vă va permite să adăugați vizualizări uimitoare de date la aplicațiile dvs. Aflați cum în această serie Tuts + Premium!
Disponibile și în această serie:
Lucrul cu CorePlot: configurarea proiectului
Lucrul cu CorePlot: Bazele fundamentale
Lucrul cu CorePlot: Styling și Adding Plots
Lucrul cu CorePlot: Crearea unui grafic de bare
Lucrul cu CorePlot: Crearea unei diagrame
Unde am plecat
Ultima dată când am introdus cadrul CorePlot și am discutat despre ce poate face și cum îl putem folosi pentru a îmbunătăți vizualizarea datelor în aplicațiile noastre. De asemenea, am explorat aplicația probabilă pe care o vom crea în serie și cum să adăugăm CorePlot aplicației noastre. Pentru un snapshot de cod de unde am plecat ultima dată, descărcați codul sursă pentru acest tutorial (altfel nu ezitați să utilizați baza de cod existentă și salvați timpul de descărcare!).
Pasul 1. Setarea lucrurilor în sus
Înainte de a putea crea un grafic, vom avea nevoie de o vizualizare pentru a face acest lucru. Vom permite utilizatorului să facă clic pe un UIBarButtonItem în fila "Studenți", care va afișa o foaie de acțiune care conține o listă de grafice pentru utilizator pentru a alege. Odată ce se face o selecție, o vizualizare modală va afișa un grafic cu datele relevante pe acesta.
Vom crea un nou grup numit "Graphing" sub grupul "StudentTracker". Creați un grup de "Vizionări" și "Controlor" sub această categorie, cum ar fi "Afișarea elevilor" și "Învățarea subiectului".
Creați o nouă clasă numită "STLineGraphViewController" (subclasarea UIViewController) în grupul "View Controllers". Când alegeți unde să adăugați fișierele, cel mai bun loc pentru a le pune este folderul "Classes / Graphing / View Controllers" (va trebui să creați directorul "Graphing / View Controllers").
Vom reveni și vom lucra la personalizarea acestui lucru mai târziu. În momentul de față vom implementa acel cod care permite utilizatorului să selecteze un grafic care să se uite.
Mai întâi deschideți STStudentListViewController.h și adăugați declarațiile de protocol "UIActionSheetDelegate" și "STLineGraphViewControllerDelegate". Acest protocol nu există încă, dar îl vom crea mai târziu (asigurați-vă că importați fișierul "STLineGraphViewController.h".
Acest cod nu ar trebui să necesite prea multe explicații. Pur și simplu creăm un controler de vizualizare LineGraph și îl prezentăm modal. Ne-am stabilit ca delegat, astfel încât să știm când să respingem punctul de vedere modal. De asemenea, oferim unui controler de vizualizare un context de obiecte gestionate pentru a lucra astfel încât să poată interfața cu datele de bază. Aceste două metode vor crea un avertisment (sau o eroare în cazul în care folosiți ARC) deoarece proprietățile nu există încă, dar le vom crea mai târziu.
Apoi vom crea o metodă pentru a apela foaia de acțiune și a adăuga un UITabBarItem pentru a-l apela. Adăugați o declarație de metodă în interfața .m numită "graphButtonWasSelected:":
Apoi trebuie să adăugăm un UIBarButtonItem pentru ca utilizatorul să aleagă când dorește să vizualizeze graficul. Vom face acest lucru în metoda viewDidLoad dedesubtul căreia vom crea elementul cu butonul din dreapta:
În cele din urmă, trebuie să implementăm o metodă de protocol STLineGraphViewController care va spune controlerului să respingă vizualizarea modală atunci când utilizatorul este gata să privească graficul:
Mai întâi trebuie să creăm o clasă de vizualizare personalizată pentru LineGraphViewController. În grupul Graphing> Views creați o nouă clasă care extinde UIView numită 'STLineGraphView' (Asigurați-vă că ați pus-o în dosarul corect atunci când ați ales unde sa salvat în sistemul de fișiere).
Vom stabili aspectele grafice ale vizualizării în clasa de vizualizare. Mai întâi mergeți la fișierul .h și (după importarea fișierului "CorePlot-CocoaTouch.h") și adăugați următoarea declarație de proprietate:
CPTGraphHostingView este pur și simplu un UIView care este responsabil pentru conținutul graficului și care permite interacțiunea utilizatorului (pe care o acoperim într-un tutorial mai târziu).
Sintetizați carteaHostingView și creați vizualizarea graficului de găzduire în metoda initWithFrame:
Cele de mai sus ar trebui să fie destul de auto-explicative. Creați un CPTGraphHostingView și îl setați ca proprietatea chartHostingVIew. Apoi îl adăugăm sub formă de subiectiv.
Apoi trebuie să setăm dimensiunile cadrelor grafice în metoda "subdiviziuni de aspect":
Din nou, toate cele de mai sus ar trebui să fie simple lucruri. Înainte de a începe să lucrăm la controler, asigurați-vă că eliberați proprietatea 'chartHostingView' în metoda dealloc vizualizări dacă nu ați făcut-o deja.
Pasul 3. Crearea graficului liniei
Cea mai mare parte a muncii pe care o vom face acum va fi în controlor. Deschideți STLineGraphViewController.h și adăugați următoarele declarații de proprietate:
CPTGraph este o clasă abstractă care este responsabilă pentru desenarea elementelor grafice și gestionarea diferitelor parcele. De asemenea, este responsabil pentru aplicarea de teme, reîncărcarea datelor grafice și mult mai mult! De asemenea, indicăm faptul că vom respecta protocoalele CPTScatterPlotDataSource și CPTScatterPlotDelegate.
Trebuie, de asemenea, să adăugăm un protocol propriu, astfel încât vederea modalului să poată fi respinsă. Puneți următorul cod deasupra declarației de interfață:
Treceți la fișierul * .m și sintetizați graficele și proprietățile delegate. După ce se procedează astfel, adăugați următorul cod înainte de metoda "viewDidLoad":
Există câteva lucruri care se întâmplă în această secțiune. În primul rând, creăm și setăm vizualizarea controlerului ca STLineGraphView personalizat. Apoi, vom crea un obiect "CPTTheme". Obiectul CPTTheme gestionează stilul unui grafic cu stiluri de linie, stil text și orice umpluturi care sunt necesare. O modalitate ușoară de a obține un CPTGraph preconfigurat cu o bază CPTTheme este de a crea CPTTheme cu unul dintre numele temelor predefinite și apoi folosind metoda 'newGraph' pentru a ne da un grafic cu stil.
Apoi, vom introduce următorul cod în metoda "viewDidLoad":
În codul de mai sus obținem vizualizarea noastră și setarea graficului găzduit pentru vizualizarea graficului de vizualizări pentru obiectul grafic. Apoi vom crea un "complot" pentru a pune pe grafic. Folosim "CPTScatterPlot" când vrem să creăm un grafic liniar. Identificatorul este ceva ce putem folosi pentru a identifica parcela mai târziu. Apoi, setăm delegatul și sursa de date la clasa de controlor, deoarece acesta va fi responsabil pentru furnizarea datelor pentru grafic. În final, adăugăm graficul nou creat al graficului.
După ce vom lucra cu graficul, vom crea un element de navigare și o bară pentru controlerul de vizualizare modală pentru a afișa un titlu și un buton făcut care le va duce înapoi la vizualizarea originală.
Încercați să rulați proiectul acum și să mergeți la graficul de linie. Ar trebui să vedeți ceva de genul:
Avem începutul unui grafic! Acum, pentru a adăuga câteva date:
Pasul 4. Adăugarea datelor în grafic
Parcelele din CorePlot utilizează două metode principale de date pentru obținerea datelor: 'numberOfRecordsForPlot' și 'numberForPlot: field: recordIndex:'. Este foarte asemănător cu modul în care funcționează tabelul. Mai întâi, dorim să specificăm numărul de înregistrări pentru parcelă:
Aflăm câte înscrieri au avut loc în fiecare zi a săptămânii. Deoarece există 7 zile posibile în care studentul ar fi putut să se înscrie, avem 8 înregistrări totale (pentru că începem la 0).
Acum, vrem să specificăm ce ar trebui să fie valori x și y pentru fiecare înregistrare:
Există un pic echitabil care se întâmplă mai sus. Această metodă trebuie să specifice o valoare x și y pentru un anumit index și valoarea pe care o returnează se bazează pe valoarea 'fieldEnum' (care în cazul nostru este fie CPTScatterPlotFieldX, fie CPTScatterPlotFieldY). Indicele indică înregistrarea pe care urmează să se compileze pe grafic și graficul se referă la graficul real care afișează datele. Atunci când avem un controler care administrează mai mult de un grafic, putem examina identificatorul parcelei pentru a determina ce set de date să furnizăm (acoperim acest proces într-un tutorial mai târziu).
Consider că este mai ușor să specificați o valoare "x" și "y" la începutul metodei, elaborând ambele valori și apoi bazându-vă pe enumul câmpului returnând cel corect într-o formă NSNumber (care este formatul corePlot o cere).
Valoarea x este ușor de constatat. Pe măsură ce afișează zilele înscrierii, x este egal cu indicele curent. Valoarea y va fi un număr de studenți înscriși în acea zi. Putem obține acest lucru prin apelarea la magazinul de date de bază și căutăm toate înregistrările STStudent cu o valoare "dayEnrolled" a indexului. Dacă nu sunteți familiarizați cu datele de bază și nu înțelegeți tot ceea ce se întâmplă dont fi prea îngrijorat, pentru că acum e bine că funcționează. Concentrați-vă pe învățarea unui singur lucru la un moment dat!
Dacă salvați și rulați aplicația acum, tot nu veți vedea nimic afișat pe grafic, dar ar trebui să vedeți următoarea ieșire în consola dvs.:
Aceasta inseamna ca graficul obtine valorile corecte pentru x si y (asigurati-va ca acesta este acelasi sau similar cu rezultatul din imagine.) Totusi, acesta nu se mai arata pe grafic, insa daca priviti graficul, intervalul afișat este incorect.Vom privim la -1.0 la 0 pe ambele axe x și y.Avem nevoie de a seta intervalul de a privi înainte de a putea vedea punctele de date.
Spațiul de plotare determină mult despre modul în care graficul este vizualizat și formatat. Vom învăța puțin în acest tutorial și vom prezenta detalii mai detaliate în următorul.
Pentru a seta gama x și y pe care utilizatorul o privește, trebuie să lucrăm cu obiectul "CPTXYPlotSpace". Acest obiect ne permite să setăm un interval vizibil pentru grafic.
Mergeți la metoda viewDidLoad și adăugați următorul cod chiar dedesubt, unde adăugăm graficul în grafic:
Mai întâi, obținem un obiect CPTXYPlotSpace din spațiul de complot implicit al graficelor (este necesară o casting). Apoi am setat pur și simplu gama x și y. Gama este un obiect "CPTPlotRange" pe care îl creăm în mod static utilizând metoda "plotRangeWithLocation: length:". Această metodă ia NSDecimals dar corePlot ne oferă o funcție pe care o putem folosi pentru a obține o zecimală dintr-un int numit 'CPTDecimalFromInt' (Există și unul pentru float dacă este necesar).
Acum salvați și rulați aplicația și ar trebui să vedeți începutul primului dvs. grafic!
Data viitoare
Avem începutul unui grafic, dar este nevoie de un pic mai mult de lucru înainte ca acesta să fie foarte util. Data viitoare vom discuta cum să setăm și să formăm etichetele axelor, liniile de marcare și incrementările. De asemenea, vom discuta cum să personalizăm aspectul graficului și, în sfârșit, cum să adăugăm și să gestionăm mai multe parcele pe un singur grafic. Ne vedem data viitoare!
Share
Accentsconagua
