Beispiele für Datenvisualisierung aus unseren .Net Winforms Wpf C++ MFC VCL Charting-Komponentendemos

Die folgende Tabelle finden Sie in Beispiel 030 in unseren Beispielprojekten und unseren Demos.

In diesem Beispiel wird der Entwickler zeigen, wie ein Open High Low Close, Candle-Stick, Box-Plot-Diagramm mit mehreren Y-Achsen und einem diskontinuierlichen Datumskalender entlang der x-Achse erstellt wird. Die Datumszeit auf der x -Achse hat mehrere Optionen zum Formatieren von Datumsangaben, dieses Beispiel zeigt 3 Zeichen-Monate und -Tage. Beim Herunterladen und Ausführen dieses Beispiels wird auch gezeigt, wie Sie Table Annotation Hot Spots verwenden, um Daten zu ändern, und es wird die Aktualisierung von Tabellenanmerkungen in Echtzeit gezeigt.

Wenn programmatisch gesteuert wird oder der Endbenutzer steuert, welche Teilmengen (Serien) angezeigt werden, zeigen mehrere Achsen automatisch eine ausgeblendete Neukonfiguration nach Bedarf an. Die meisten wissenschaftlichen Diagramme benötigen oft ähnliche Mehrfach- oder überlappende y-Achsen.

Unten wird das obige Diagramm gezeigt, das auf einen kleineren Datumsbereich gezoomt ist. Beachten Sie die Datumsbeschriftungen mit höherer Dichte entlang der unteren x-Achse und oben im Diagrammbereich. Das Zoomen erfolgt entweder durch Drehen des Mausrads oder durch Ziehen einer Zoombox mit Linksklick.

Unten zeigt ein Kunde die Verwendung von Graph Annotations zur Implementierung einer proprietären Finanzstudie.

Unten wird das 3D-Diagramm von Bohrlochdaten gezeigt. Ein Bohrloch ist ein Loch, das gebohrt wird, um die Erforschung und Rückgewinnung natürlicher Ressourcen, einschließlich Öl, Gas oder Wasser, zu unterstützen. Ein Bohrloch ist das eigentliche Loch, das den Brunnen bildet.

Siehe Beispiel 403 in unseren Beispielprojekten und unseren Demos.

Die grünen Röhren sind Graphen-Annotationen vom Typ Linie und werden über einen einfachen Moveto-LineTo-Mechanismus implementiert. Diese Linienanmerkungen können als echte Linien oder Röhren dargestellt werden. Intern innerhalb unserer Diagrammkomponente wird die Röhre über einen Geometrieshader auf der GPU erstellt, sodass nur 4 Stützpunkte pro Punkt benötigt werden; 2 Scheitelpunkte, die die Spannweite des Röhrensegments steuern, und 2 angrenzende Scheitelpunkte, um zu steuern, wie sich die Enden der Röhre verbinden. Der Geometriesshader injiziert dann 128 Stützpunkte, um das Rohrkörpersegment zu bilden. Wir haben eine Menge an komplexen Trigonometrie- und Matrix-Mathe-Codes geschrieben, damit Sie dies nicht tun müssen.

Text der 3D-Diagrammanmerkungen steht dem Betrachter in 2D gegenüber. Und der 2D-Text weicht anderen Anmerkungen, Teilmengen und Achsenbeschriftungen aus. Super schick, wie es sein sollte, in einer wirklich besten Diagramm-Komponente.

Außerdem wird unsere Tool-Tip-Funktion gezeigt, die den Endbenutzer mit Bohrlochkoordinaten auffordert. Dies ist ein Standard-Windows-Tool-Tip und wir bieten Eigenschaften, um alle Funktionen anzupassen, die der Standard-Windows-Tool-Tip bietet.

Wenn Sie diese Demo aus erster Hand ausführen und die Zahlentasten 0 bis 9 drücken, wird eine Animation des Bohrgeräts aufgerufen, das sich im Bohrloch nach unten bewegt. Wenn Sie zuerst auf dieses Diagramm doppelklicken, um die Auto-Rotation zu starten, und dann 0 bis 9 drücken, wird die Ansicht animiert, die sich im Brunnen nach unten bewegt, während die Kamera um 360 Grad um den Brunnen gedreht wird. Sehr schick und ein Muss. Dies stellt komplexe Trigonometrie und mathematische Matrixtransformationen dar, über die Sie sich keine Sorgen machen müssen.

Das folgende Diagramm zeigt einen anderen Farbstil und eine feste 2D-Kontur unten anstelle von 2D-Linien unten. Es gibt eine einfache Eigenschaft zum Ein- und Ausblenden von Anmerkungsbezeichnungen, die optional auch dem Endbenutzer Ihrer Software zur Verfügung stehen.

Suchen Sie die Eigenschaften „ShowContour“ und „ShowAnnotationText“ in unserer Diagrammdokumentation.

Dieses folgende Beispiel ist nicht in unserer Demo enthalten, aber ein Kunde hat diese 2D-Heatmap/ 2D-Kontur-/Spektrogramm-Implementierung gesendet. Ein Spektrogramm ist eine visuelle Darstellung des Frequenzspektrums eines Signals, da es mit der Zeit variiert.

Sehen Sie ähnliche Diagramme in den Beispielprojekten und Demos in den Beispielen 139, 120, 121 und 122.

Gleiches Diagramm oben, es wurde jedoch vergrößert, um mehr Details zu zeigen. ProEssentials Charting bietet zwei Arten des Zoomens.

• Rechtsklicken und ziehen Sie einen Auswahlbereich.
• Drehen Sie das Mausrad, um herein- und herauszuzoomen.

Suchen Sie die Eigenschaften „AllowZooming“ und „MouseWheelFunction“ in unserer Charting-Dokumentation.

Unten wird ein 3D-Streudiagramm mit allen Achsen in der Log-Skalierung gezeigt anstelle einer normalen linearen Skalierung.

Beachten Sie, dass sich die Rasterlinienbeschriftungen X, Y und Z in einer optionalen wissenschaftlichen Notation befinden.

Dieses Diagramm zeigt optional ein Diagramm in isometrischer Perspektive. Beachten Sie in diesem Zusammenhang, dass ein hinteres unteres Rasterquadrat die gleiche Größe wie ein vorderes unteres Rasterquadrat hat. Die Tiefe innerhalb des Diagramms verzerrt die Position und Größe der Daten nicht. Die Punktgrößen erscheinen ähnlich, wenn auch tiefer im Bild.

Siehe Beispiel 404 in unserem Beispielcode und unseren Demos.

Die Protokollskala wird über die Eigenschaften pegrid.configure.xaxisScaleControl, YaxisScaleControl und ZaxisScaleControl gesteuert.

Das folgende Diagramm ist das gleiche 3D-Streudiagramm wie oben, das jedoch über das Mausrad vergrößert wurde.

Beachten Sie den roten festen Punkt zwischen den gelben Punkten zusammen mit der Textaufforderung der Datenkoordinaten für diesen roten Punkt. Diese Bildschirmaufnahme zeigt nicht den Mauspfeil an, aber die Maus befindet sich oben auf diesem roten Punkt. Das Diagramm bietet Hit-Tests und Datenaufforderungen von Datenwerten unter der Maus.

Das folgende Diagramm ähnelt dem Beispiel 404 in unserer Demo, zeigt jedoch einige weitere Funktionen von der ProEssentials 3D Graph Annotation. GraphAnnotationPolyData (wo der Entwickler tatsächliche Positionen von Scheitelpunkten auf niedriger Ebene liefern kann, um Polygone zu erzeugen) und GraphAnnotation-Typen auf höherer Ebene zur Herstellung von Zylindern, Kegeln, 3D-Ellipsoiden, Cubes, 2D-Ellipsen, 2D-Reglaten usw. in einfacherer Annotation über ProEssentials property GraphAnnotationType.

Das folgende Diagramm ist die gleiche 3D-Streuung oben, wurde jedoch über das Mausrad vergrößert.

Beachten Sie, dass die Ansicht (Kameraposition) von der Innenseite der grauen Kugel nach außen gerichtet ist. Beachten Sie erneut den Red Cube, der Datenkoordinaten für die Position des Mauszeigers anzeigt.

Im Folgenden finden Sie Beispiel 123 in unserem Beispielcode und unseren Demos.

Beachten Sie den grünen Text oben links „Play“. Klicken Sie auf diesen Text, wenn Sie unsere Beispielprojekte oder eine Demo aus erster Hand herunterladen und ansehen. Ein Song wird abgespielt und eine vertikale Zeilenanmerkung folgt der Liederposition in Echtzeit. Zoomen Sie dann mit dem Mausrad, um eine detailliertere Ansicht der aktuellen Liederposition anzuzeigen. Es ist sehr schön, das Mausrad auf 500-1000 Punkte zu vergrößern, und das Echtzeit-Diagramm ahmt ein Oszilloskop nach, bei dem man die Daten nicht mehr von rechts nach links wahrnimmt, sondern das Echtzeit-Diagramm zeigt mit jedem Frame völlig unterschiedliche Daten an.

Dieses Diagramm zeigt auch eine Funktion der ereignisbasierten benutzerdefinierten X-Achsen-Formatierung. Während die x-Achse gerendert wird, wird der Beschriftungstext für die Rasterlinie an ein Entwicklererereignis gesendet, damit der Entwickler eine benutzerdefinierte Darstellung des Beschriftungstextes einfügen kann. Mit nur wenigen Codezeilen kann man eine eigene benutzerdefinierte X-Achsenformatierung erstellen.

Unten ist Beispiel 130 in unserem Beispielcode und unseren Demos.

Dieses Diagramm veranschaulicht zusätzliche X- und Y-Achsen. Eine einfache Funktion, wenn 2 Skalen die gleichen Daten darstellen können, beispielsweise „Celsius“ und „Fahrenheit“.

Unten ist Beispiel 129 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt vertikal orientierte Rasternummern der Y-Achse und eingebettete Teilmengenlegenden in den Rasterbeschriftungsbereich.

Das Ziel dieser kombinierten Features ist es, bei der Implementierung vieler überlappter Mehrfachachsen den Fensterbereich zu erhalten. Vor allem, wenn das Diagramm selbst sehr klein ist, da Sie möglicherweise 20 dieser Diagramme in einem Fenster haben.

Unten ist Beispiel 132 in unserem Beispielcode und unseren Demos.

Dieses Diagramm veranschaulicht die Verwendung eines Ereignisses zur benutzerdefinierten Formatierung der Y-Achse. Wenn Sie beispielsweise die y-Achse sehen, in der [400] existieren würde, wird an dieser Stelle [High Value] angezeigt.

Die folgenden Diagramme stammen aus den Beispielen 409 und 401 in unseren Beispielcodes und Demos.

Diese Diagramme zeigen 3D-Konturen und GIS-Fähigkeiten in Kombination mit 3D-Diagrammanmerkungen.

Unten ist Beispiel 301 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt Tortendiagramm-Fähigkeiten. Wenn Sie die Beispielprojekte und Demos ausführen, können Sie mit der rechten Maustaste auf das Diagramm klicken und [Data Shadows] und [Gradient Styles] auswählen, um die verschiedenen alternativen Diagramme unten anzuzeigen.

Beachten Sie, dass ProEssentials über eine integrierte Funktion verfügt, mit der Sie Null-Slices (oder Slices unter einem bestimmten Schwellenwert) automatisch in einen anderen Slice gruppieren und Null, Null-Daten oder winzige Splitter auf saubere professionelle Weise behandeln können.

Optionale Legendenfunktion, die die Legende vom Tortendiagramm trennt.

Unten ist Beispiel 200 in unserem Beispielcode und unseren Demos.

Dieses Diagramm veranschaulicht die Funktionen von ProEssentials Polar Chart. Wenn Sie die Beispielprojekte und Demos ausführen, wird das Zoomen unserer Polardiagramme das beste Polardiagramm der Branche demonstrieren. Das Polarraster ändert sich in Abhängigkeit von der Zoomstufe intelligent in der Struktur.

Unten ist dasselbe Diagramm wie oben, aber gezoomt.

Das folgende Diagramm zeigt ein optional höhes Polardiagrammraster mit hoher Dichte.

Unten ist Beispiel 203 in unserem Beispielcode und Demos.

Dieses Diagramm veranschaulicht die Funktionen von ProEssentials Smith Chart. Wenn Sie die Beispielprojekte und Demos ausführen, wird das Zoomen unserer Smith-Charts das beste Charting Smith Chart der Branche demonstrieren. Die Rasterbeschriftungen der Smith-Charts ändern sich in Abhängigkeit von der Zoomstufe intelligent in der Struktur.

Es gibt auch eine ähnliche Unterstützung für Admittance Charts.

Unten ist dasselbe Diagramm wie oben, aber gezoomt.

Unten ist Beispiel 407 in unserem Beispielcode und unsere Demos.

Dieses Diagramm veranschaulicht die Funktionen des ProEssentials 3D-Wasserfalldiagramms. Wenn Sie die Beispielprojekte und -demos ausführen, wird diese Ansicht angezeigt, wenn Sie mit der rechten Maustaste auf das Diagramm klicken und im Menü Plotmethode die Option Punkt auswählen.

Unten ist Beispiel 402 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt ProEssentials 3D Surface Contours mit zufälliger nicht linearer Beziehung zwischen Farbe und Y-Wert.

Beachten Sie den größeren gelben Farbanteil innerhalb der Legende.

Das folgende Diagramm ähnelt dem Beispiel 406 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt die ProEssentials 3D-Polygon-Datenschnittstelle.

Dieses Bild erweitert das Diagramm, indem es einen vierten dimensionalen Datensatz, wData, bereitstellt, der eine 4D - 3D Renderingkontur-Plotting-Methode ermöglicht.

Unten ist Beispiel 403 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt die 3D-WireFrame-Plotting-Methode in Kombination mit der Eigenschaft PointColors, um das Diagramm auf eine beliebige vierte dimensionale Weise zu färben.

Unten ist Beispiel 139 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt eine 2D-Heatmap, eine 2D-Kontur, ein Spektrogramm mit Log Linear-Skalierung, implementiert über Direct3D- und DirectX-Hardwarebeschleunigung.

Das folgende Diagramm ist das obige Diagramm, das vergrößert wurde, um weitere Details anzuzeigen.

Unten ist Beispiel 121 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt eine 2D-Kontur, die als 2D-Konturlinien mit markierten Isolinen gezeichnet sind.

Unten ist Beispiel 122 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt ein 2D-Konturdiagramm mit optionaler Schattenbildung, um die Tiefe zu visualisieren.

Unten ist das gleiche Diagramm wie oben ohne die Schattenbildung.

Wenn Sie die Beispielprojekte und Demos ausführen, klicken Sie mit der rechten Maustaste im Menü „Plotting-Method“ auf „Contour-Colors“, um diese Ansicht zu erhalten.

Das 2D-Konturschatten-Feature verleiht den Daten dramatisch Tiefe, aber die Nicht-Schattenansicht ist auch nützlich, wenn andere Daten oder Anmerkungen mehr Aufmerksamkeit erhalten sollten.

Das folgende Diagramm ist das gleiche Diagramm wie oben, wurde jedoch gezoomt, um mehr Details zu zeigen.

Unten ist Beispiel 400 in unserem Beispielcode und Demos.

Dieses Diagramm zeigt ein 3D-WireFrame-Diagramm mit Echtzeit-2D-Polygon-Annotation, um einen Datenabschnitt unter der Maus zu kommentieren.

Wenn Sie die Beispielprojekte und -demos ausführen, wird durch Bewegen der Maus über das Oberflächendiagramm ein Echtzeit-2D-Polygon-Slice angezeigt. Der Code befindet sich im Beispielcode des Ereignisses „MouseMove“. Durch Drücken der Taste 0 auf 9 wird das Diagramm automatisch gedreht, das auf die Kameraansicht bei Annotation 0 bis 9 abzielt. Durch Drehen des Mausrads wird beim Anzeigen der Anmerkung vergrößert und verkleinert. Beachten Sie, dass sich die Anmerkungsbeschriftungen gegenseitig ausweichen, wenn das Diagramm gedreht wird.

Für die meisten Kunden ist dieser Code in Form1 zu finden, und man kann den verwandten Beispielcode schneller finden, indem man nach 400, der Beispiel-ID-Nummer, sucht. Ersetzen Sie sie durch eine beliebige Zahl, um verwandten Code für jedes Beispiel in unseren Beispielprojekten zu finden.

Das folgende Diagramm ähnelt dem Beispiel 405 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt ein 3D-Balkendiagramm mit der Eingabeaufforderung der Daten unter der Maus (weißen Balken und Datenwert 1696 beachten). In diesem Diagramm werden auch Cube-Anmerkungen angezeigt, die über den Daten platziert sind.

Das folgende Diagramm ähnelt dem Beispiel 105 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt ein 2D-Liniendiagramm mit Daten, die in Bezug auf Y, Right Y, X und Top X-Achsen gezeichnet wurden.

Der Zweck dieses Beispiels besteht darin, die Funktion „CursorMode“ zur Anzeige von Datenkoordinaten mit einem dynamischen Tooltip zu demonstrieren.

Das folgende Diagramm ähnelt dem Beispiel 110 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt ein Log Log 2D-Streudiagramm.

Der Zweck dieses Beispiels besteht darin, Log-Skalen zu demonstrieren und wie gut sie sich verhalten, wenn der Endbenutzer unsere Log-Skalen zoomt.

Ein weiterer Zweck dieses Beispiels besteht darin, zu demonstrieren, wie die Endbenutzer-Tooling-Funktion für Schnellzeichnungsanmerkungen implementiert wird. Diese Funktion wird implementiert, indem Code in die Mousedown-, Mouse-Move- und Mouse-up-Ereignisse gesetzt wird, um temporäre Grafiken zu zeichnen, während die Maus gezogen wird. Wenn Sie die Beispielprojekte und Demos ausführen, wird dies beim Klicken mit der linken Maustaste und dem Halten der Maus angezeigt, während ein temporäres Rechteck angezeigt wird, wenn die Maus gezogen wird. Außerdem wird ein Text angezeigt, der die Breiten der Daten in x- und y-Richtungen kommentiert.

Das folgende Diagramm ist das gleiche Diagramm oben, wurde jedoch gezoomt, um eine alternative Konstruktion der Log-Skala anzuzeigen.

Das folgende Diagramm ähnelt dem Beispiel 136 in unserem Beispielcode und unseren Demos.

Dieses Diagramm zeigt ein High-Low-Flächendiagramm mit einer Vergleichslinie.

Die Farbe der gefüllten Bereiche wird umgekehrt, wenn die Seriengrößen tauschen, wobei die Seriengröße höher ist.

Das folgende Diagramm ähnelt dem Beispiel 016 in unserem Beispielcode und unseren Demos.

Der Zweck dieses Beispiels besteht darin, den Umgang mit Datum-Zeit-Daten zu demonstrieren, und wie gut sich die x-Achse verhält, wenn der Endbenutzer das Diagramm auf verschiedene Bereiche zoomt. Die Größe des Diagramms, die Verwendung der Popup-Menüs zum Ändern der Ausrichtung der x-Achsen-Beschriftung sowie zum Zoomen sorgen für eine massive Belichtung unserer Bits und zeigen unsere allgemeine Rendering-Überlegenheit.

Das folgende Diagramm ähnelt dem Beispiel 015 in unserem Beispielcode und unseren Demos.

Der Zweck dieses Beispiels besteht darin, zu demonstrieren, wie grundlegende Diagrammanmerkungen innerhalb eines 2D-Diagramms gezeichnet werden. Beachten Sie beim Studium des Codes für dieses Beispiel, dass dieses Beispiel eine rechte y-Achse hat und auch zeigt, wie Anmerkungen in Bezug auf die rechte y-Achse geplottet werden.

Beispiel 015 zusammen mit Beispiel 007, 014, 000, 012, 100, 103 wird am nützlichsten sein, um mit dem Studium von ProEssentials zu beginnen.

Das folgende Diagramm ähnelt dem Beispiel 126 in unserem Beispielcode und unseren Demos.

Ziel dieses Beispiels ist es, das Zeichnen von Blasendiagrammen zu demonstrieren. Sie übergeben PeData.Z zusammen mit PeData.X und PeData.Y, wenn Sie Blasendiagramme erstellen.

Das folgende Diagramm ähnelt dem Beispiel 124 in unserem Beispielcode und unseren Demos.

Der Zweck dieses Beispiels besteht darin, zu demonstrieren, wie ein Diagramm mit einem programmatisch festgelegten Zoom (horizontaler Bereich, min. und max.) angezeigt wird, das als anfängliche Standardansicht ausgewählt wurde. Mit einer horizontalen Bildlaufleiste, die zum Durchblättern des verbleibenden Datenbereichs verfügbar ist.

Das folgende Diagramm ähnelt dem Beispiel 034 in unserem Beispielcode und unseren Demos.

Ziel dieses Beispiels ist es, zu demonstrieren, wie ...

• Erstellen Sie ein horizontal gestapeltes Balkendiagramm.
• Erstellen Sie eine Tabelle und verwenden Sie diese Tabelle, um dem Endbenutzer die Auswahl der Seriensichtbarkeit zu ermöglichen.
• Erstellen Sie eine Tabellenanmerkung, um einen Textabsatz anzuzeigen.

Das folgende Diagramm ähnelt dem Beispiel 003 in unserem Beispielcode und unseren Demos.

Dieses Beispiel ist ein sehr einfaches Beispiel, das zeigt, wie Reihen sowohl gegen eine linke als auch gegen eine rechte y-Achse und in verschiedenen Darstellungsmethoden gezeichnet werden.

In diesem Beispiel wird einfach die Eigenschaft RYAxisComparisonSubsets=2 festgelegt, die 2 Gruppen von Teilmengen bildet und wo 2 die Größe der letzten Gruppierung definiert.

Die Eigenschaft „PlottingMethod“ steuert den Plotstil für die erste Gruppe.

Die Eigenschaft „PlottingMethodII“ steuert den Plotstil für die zweite Gruppe.

Mit diesem optionalen Ansatz zur Anzeige von 2 Plotstilen wird der Endbenutzer klar verstehen, dass die Serie des Diagramms in logische Gruppen eingeteilt ist, wenn sie Plotstile über den integrierten Anpassungsdialog ändern.

Es gibt verschiedene Methoden, um mehrere Plotstile anzuzeigen. Die Eigenschaft „PlottingMethods“ ermöglicht die Steuerung des Plotstils pro Serie. Siehe Demo-Beispiel 022 für ein Beispiel für die Verwendung von „PlottingMethods“.

Das folgende Diagramm ähnelt dem Beispiel 025 in unserem Beispielcode und unseren Demos.

Dieses Beispiel zeigt, wie ein schwebendes gestapeltes Balkendiagramm erstellt wird. PeData.Z steuert die Offsets der gestapelten Balken.

Unten ist Beispiel 410 in unserem Beispielcode und unseren Demos.

Dieses Beispiel zeigt, wie ein in Echtzeit aktualisiertes 3D-Oberflächendiagramm erstellt wird. Siehe das Beispiel-Code-Timer-Ereignis (Suche nach 410) für Einzelheiten darüber, wie dies implementiert wird.

Unten ist Beispiel 408 in unserem Beispielcode und unseren Demos.