Wenn Sie mit datenintensiven Anwendungen arbeiten, muss ein Entwickler oft mehr als nur Listen von Datensätzen in einer Tabellensicht anzeigen. Mit der CorePlot-Bibliothek können Sie Ihren Anwendungen beeindruckende Datenvisualisierungen hinzufügen. In dieser Tuts + Premium-Serie erfahren Sie, wie es geht!
Auch in dieser Serie erhältlich:
Arbeiten mit CorePlot: Projekteinrichtung
Arbeiten mit CorePlot: Plot-Grundlagen
Arbeiten mit CorePlot: Gestaltung und Hinzufügen von Plots
Arbeiten mit CorePlot: Erstellen eines Balkendiagramms
Mit CorePlot arbeiten: Kreisdiagramm erstellen
Wo wir aufgehört haben
Letztes Mal haben wir das CorePlot-Framework eingeführt und diskutiert, was es tun kann und wie wir es nutzen können, um die Datenvisualisierung in unseren Anwendungen zu verbessern. Wir haben auch die Beispielanwendung untersucht, die wir in dieser Serie erstellen werden, und wie CorePlot zu unserer Anwendung hinzugefügt wird. Laden Sie den Quellcode für dieses Lernprogramm herunter, um eine kurze Momentaufnahme des letzten Abbruchs zu erhalten (ansonsten können Sie Ihre vorhandene Codebasis verwenden und die Downloadzeit sparen!).
Schritt 1. Einrichten der Dinge
Bevor wir ein Diagramm erstellen können, benötigen wir dazu eine Ansicht. Wir erlauben dem Benutzer, auf der Registerkarte "Studenten" auf ein UIBarButtonItem-Element zu klicken, um ein Aktionsblatt mit einer Liste von Diagrammen für die Benutzer zu wählen. Sobald eine Auswahl getroffen wurde, zeigt eine modale Ansicht ein Diagramm mit den relevanten Daten an.
Wir werden eine neue Gruppe namens "Graphing" unter der "StudentTracker" -Gruppe erstellen. Erstellen Sie darunter eine Gruppe "Ansichten" und "Controller" wie in der "Schülerliste" und "Betreffliste"..
Erstellen Sie eine neue Klasse mit dem Namen 'STLineGraphViewController' (Unterklasse UIViewController) in der Gruppe 'View Controller'. Wenn Sie auswählen, wo die Dateien hinzugefügt werden sollen, können Sie sie am besten im Ordner "Classes / Graphing / View Controllers" ablegen. (Sie müssen das Verzeichnis "Graphing / View Controllers" erstellen.).
Wir werden später wiederkommen und daran arbeiten, dies anzupassen. Im Moment implementieren wir diesen Code, mit dem der Benutzer ein Diagramm auswählen kann, das angesehen werden soll.
Öffnen Sie zunächst STStudentListViewController.h und fügen Sie die Protokolldeklarationen 'UIActionSheetDelegate' und 'STLineGraphViewControllerDelegate' hinzu. Dieses Protokoll ist noch nicht vorhanden, wird aber später erstellt. (Stellen Sie außerdem sicher, dass Sie die Datei 'STLineGraphViewController.h' importieren)..
Dieser Code sollte nicht zu viel erklärt werden. Wir erstellen einfach einen LineGraph View Controller und stellen ihn modal dar. Wir setzen uns als Delegierter, damit wir wissen, wann wir die modale Sichtweise ablehnen sollen. Dem View Controller wird außerdem ein verwalteter Objektkontext zur Verfügung gestellt, damit er mit Kerndaten kommunizieren kann. Diese letzten beiden Methoden erzeugen eine Warnung (oder einen Fehler, wenn ARC verwendet wird), da die Eigenschaften noch nicht vorhanden sind. Wir werden sie jedoch später erstellen.
Als Nächstes erstellen wir eine Methode, um das Aktionsblatt aufzurufen, und fügen ein UITabBarItem hinzu, von dem aus es aufgerufen werden kann. Fügen Sie in der .m-Schnittstelle eine Methodendeklaration mit dem Namen 'graphButtonWasSelected:' hinzu:
Als nächstes müssen wir ein UIBarButtonItem hinzufügen, damit der Benutzer auswählen kann, wann er das Diagramm anzeigen möchte. Wir machen dies in der viewDidLoad-Methode, unter der wir den rechten Bar-Button erstellen:
Schließlich müssen wir eine STLineGraphViewController-Protokollmethode implementieren, die den Controller anweist, die modale Ansicht zu verwerfen, wenn der Benutzer mit der Betrachtung des Diagramms fertig ist:
Jetzt können wir mit der Erstellung des Diagramms beginnen!
Schritt 2. Richten Sie die Graph-Hosting-Ansicht ein
Zuerst müssen wir eine benutzerdefinierte Ansichtsklasse für unseren LineGraphViewController erstellen. Erstellen Sie in der Gruppe Graphing> Views eine neue Klasse, die UIView mit dem Namen 'STLineGraphView' erweitert (stellen Sie sicher, dass sie sich im richtigen Ordner befindet, wenn Sie den Speicherort im Dateisystem auswählen.).
Wir werden die grafischen Aspekte der Ansicht in der Ansichtsklasse festlegen. Gehen Sie zuerst zur .h-Datei und (nach dem Importieren der Datei "CorePlot-CocoaTouch.h") und fügen Sie die folgende Eigenschaftsdeklaration hinzu:
CPTGraphHostingView ist einfach eine UIView, die dafür verantwortlich ist, den Graphen zu enthalten und Benutzerinteraktionen zu ermöglichen (die wir in einem späteren Lernprogramm behandeln)..
Synthetisieren Sie die chartHostingView und erstellen Sie die Chart-Hosting-Ansicht in der Methode initWithFrame:
Das oben genannte sollte ziemlich selbsterklärend sein. Wir erstellen eine CPTGraphHostingView und legen sie als unsere Eigenschaft chartHostingVIew fest. Wir fügen es dann als Unteransicht hinzu.
Als Nächstes müssen Sie die Abmessungen des GraphViews-Frames in der Methode "Layout-Subviews" festlegen:
Auch hier sollten alle oben genannten Dinge einfach sein. Bevor Sie mit der Arbeit an dem Controller beginnen, stellen Sie sicher, dass Sie die Eigenschaft 'chartHostingView' in der dealloc-Methode von views freigeben, falls Sie dies noch nicht getan haben.
Schritt 3. Erstellen Sie das Liniendiagramm
Die meiste Arbeit, die wir jetzt machen werden, wird im Controller liegen. Öffnen Sie STLineGraphViewController.h und fügen Sie die folgenden Eigenschaftendeklarationen hinzu:
Der CPTGraph ist eine abstrakte Klasse, die für das Zeichnen der Diagrammelemente und das Verwalten der verschiedenen Diagramme verantwortlich ist. Es ist auch verantwortlich für das Anwenden von Themen, das Neuladen der Diagrammdaten und vieles mehr! Wir weisen auch darauf hin, dass wir die Protokolle CPTScatterPlotDataSource und CPTScatterPlotDelegate einhalten werden.
Wir müssen auch ein eigenes Protokoll hinzufügen, damit die modale Ansicht verworfen werden kann. Fügen Sie den folgenden Code oberhalb der Schnittstellendeklaration ein:
Wechseln Sie zur * .m-Datei und synthetisieren Sie die Diagramm- und Delegate-Eigenschaften. Fügen Sie danach den folgenden Code vor der Methode 'viewDidLoad' hinzu:
In diesem Abschnitt gibt es einiges zu tun. Zunächst erstellen und setzen wir die Ansicht des Controllers als benutzerdefinierte STLineGraphView. Als Nächstes erstellen wir ein 'CPTTheme'-Objekt. Das CPTTheme-Objekt verwaltet den Stil eines Diagramms mit Linienstilen, Textstil und allen erforderlichen Füllungen. Um einen mit einem CPTTheme-Basiskonfigurator vorkonfigurierten CPTGraph zu erhalten, können Sie einfach das CPTTheme mit einem der vordefinierten Designnamen erstellen und dann die Methode 'newGraph' verwenden, um uns einen mit ihm gestalteten Graphen zu geben.
Als Nächstes fügen wir den folgenden Code in die Methode 'viewDidLoad' ein:
Im obigen Code erhalten wir unsere Ansicht und setzen das gehostete Diagramm für die Ansichtsdiagramm-Hosting-Ansicht auf unser Diagrammobjekt. Wir erstellen dann eine "Grafik", um sie in die Grafik einzufügen. Wir verwenden den 'CPTScatterPlot', wenn wir ein Liniendiagramm erstellen möchten. Mit der Kennung können wir die Zeichnung später identifizieren. Dann setzen wir den Delegaten und die Datenquelle auf die Controller-Klasse, da er für die Bereitstellung der Daten für das Diagramm verantwortlich ist. Zum Schluss fügen wir den neu erstellten Plot des Diagramms hinzu.
Nachdem wir mit dem Diagramm gearbeitet haben, erstellen wir ein Navigationselement und eine Navigationsleiste für den Controller für modale Ansicht, um einen Titel und eine Schaltfläche "Fertig" anzuzeigen, mit der sie zur ursprünglichen Ansicht zurückkehren.
Führen Sie das Projekt jetzt aus und gehen Sie zum Liniendiagramm. Sie sollten etwas wie das Folgende sehen:
Wir haben den Anfang eines Graphen! Jetzt einige Daten hinzufügen:
Schritt 4. Daten zum Diagramm hinzufügen
Diagramme in CorePlot verwenden zwei Hauptmethoden für Datenquellen, um Daten abzurufen, 'numberOfRecordsForPlot' und 'numberForPlot: field: recordIndex:'. Es ist der Funktionsweise von Tabellensichten sehr ähnlich. Zunächst möchten wir die Anzahl der Datensätze für die Zeichnung angeben:
Wir zeigen, wie viele Anmeldungen an jedem Wochentag stattfanden. Da es 7 mögliche Tage gibt, an denen der Student eingeschrieben sein könnte, haben wir insgesamt 8 Datensätze (weil wir bei 0 beginnen)..
Nun möchten wir festlegen, wie der x- und y-Wert für jeden Datensatz aussehen soll:
Oben ist einiges los. Diese Methode muss einen x- und y-Wert für einen bestimmten Index angeben. Der zurückgegebene Wert basiert auf dem Wert 'fieldEnum' (in unserem Fall entweder CPTScatterPlotFieldX oder CPTScatterPlotFieldY). Der Index gibt an, dass der Datensatz in der Grafik dargestellt werden soll, und die Grafik bezieht sich auf die tatsächliche Grafik, in der die Daten angezeigt werden. Wenn wir über einen Controller verfügen, der mehr als einen Plot verwaltet, können Sie den Plotbezeichner betrachten, um zu bestimmen, welcher Datensatz bereitgestellt werden soll (wir behandeln diesen Prozess in einem späteren Lernprogramm)..
Ich finde es am einfachsten, einen 'x' und 'y'-Wert am Anfang der Methode anzugeben, beide Werte auszuarbeiten und dann basierend auf dem Feld enum den korrekten Wert in der Form einer NSNumber (das ist das Format) CorePlot erfordert es in).
Der x-Wert ist leicht zu ermitteln. Da es die Tage der Registrierung anzeigt, entspricht x dem aktuellen Index. Der y-Wert ist eine Zählung aller an diesem Tag eingeschriebenen Schüler. Wir können dies erreichen, indem wir unseren Kerndatenspeicher anrufen und nach allen STStudent-Datensätzen mit einem 'dayEnrolled'-Wert des Index suchen. Wenn Sie mit den Kerndaten nicht vertraut sind und nicht alles verstehen, was los ist, machen Sie sich keine Sorgen, denn jetzt ist es in Ordnung, dass es funktioniert. Konzentriere dich darauf, eine Sache zu einer Zeit zu lernen!
Wenn Sie Ihre Anwendung jetzt speichern und ausführen, wird im Diagramm immer noch nichts angezeigt. In Ihrer Konsole sollte jedoch die folgende Ausgabe angezeigt werden:
Dies bedeutet, dass der Graph die korrekten Werte für x und y erhält (vergewissern Sie sich, dass er mit der Ausgabe im Bild übereinstimmt oder dieser ähnelt. Er wird jedoch immer noch nicht im Graph angezeigt. Wenn Sie sich den Graph anschauen, wird der Graph angezeigt Der angezeigte Bereich ist falsch. Wir betrachten auf der X- und Y-Achse -1,0 bis 0. Wir müssen den Bereich einstellen, den Sie betrachten möchten, bevor wir die Datenpunkte sehen können.
Der Plotraum bestimmt viel darüber, wie der Graph angezeigt und formatiert wird. Wir werden in diesem Tutorial ein wenig behandeln und werden im nächsten ausführlicher darauf eingehen.
Um den x- und y-Bereich festzulegen, den der Benutzer betrachtet, müssen wir mit dem 'CPTXYPlotSpace'-Objekt arbeiten. Mit diesem Objekt können wir einen sichtbaren Bereich für die Grafik festlegen.
Rufen Sie die viewDidLoad-Methode auf und fügen Sie den folgenden Code rechts darunter ein, wo wir die Grafik zu unserem Diagramm hinzufügen:
Zuerst erhalten wir ein CPTXYPlotSpace-Objekt aus dem Standard-Plotbereich der Diagramme (einige Umsetzungen sind erforderlich). Dann setzen wir einfach den x- und y-Bereich. Der Bereich ist ein 'CPTPlotRange'-Objekt, das statisch mit der Methode' plotRangeWithLocation: length: 'erstellt wird. Diese Methode erfordert NSDecimals, aber CorePlot stellt uns eine Funktion zur Verfügung, mit der wir eine Dezimalzahl aus einem int mit dem Namen 'CPTDecimalFromInt' abrufen können (falls erforderlich, gibt es auch eine Funktion für float)..
Speichern und starten Sie die Anwendung, und Sie sollten den Beginn Ihres ersten Diagramms sehen!
Nächstes Mal
Wir haben den Anfang eines Graphen, aber es braucht etwas mehr Arbeit, bevor er sehr nützlich sein kann. Nächstes Mal werden wir darüber sprechen, wie Achsenbeschriftungen, Hilfsstrichlinien und Inkremente festgelegt und formatiert werden. Wir werden außerdem besprechen, wie Sie das Aussehen des Diagramms anpassen und schließlich mehrere Diagramme in einem einzigen Diagramm hinzufügen und verwalten. Bis zum nächsten Mal!
Share
Accentsconagua
