JavaScript-Diagramm-Beispiele

Willkommen auf der Live-Demo-Seite. Diese Demos sehen Sie am besten auf einem Desktop. Sie laufen auch mobil, in reduzierter Komplexität, sodass Sie sie auch dort vergleichen können.

Each opens in a new window. No install, no account, no email, no licence key.

1 — Schnelles 2D: GigaPrime2D

Ein einzelnes Liniendiagramm mit fünf Subsets von je bis zu zwanzig Millionen Punkten — einhundert Millionen Punkte im Browser. Das ist keine reduzierte Web-Zahl: Es ist die Größe, die unsere Win32-Desktop-Demo fährt, und die Demo beschriftet sie auch so.

Der gesamte Datensatz wird bei jedem Tick ersetzt, nicht angehängt. Schalten Sie den Timer ein, und die Engine übergibt alle fünf Subsets in jedem Frame neu. Ersetzen ist der Fall, den die meisten Web-Diagramme stillschweigend nicht vorführen, und es ist der Fall, für den diese Engine gebaut wurde.

Sie startet mit 400.000 Punkten, damit die Seite sofort benutzbar ist, und die Leiter geht von dort aus nach oben. Sie können die Y-Achsen zusammenführen oder trennen, ein Subset nach dem anderen hervorheben, die Achsen ausblenden, den Zoom begrenzen und dabei die Bildrate beobachten.

Auf einem Telefon werden die drei größten Größen aus der Liste entfernt, statt sie anzubieten und scheitern zu lassen. Hundert Millionen Punkte brauchen rund 458 MB, und ein Telefon-Browser beendet diesen Tab ohne Vorwarnung.

Launch GigaPrime2D Source on GitHub

2 — 3D-Oberfläche + 2D-Kontur + 2D-Linie: GigaPrime3D

Drei Diagrammtypen auf einem Bildschirm, aus einem Datensatz gespeist. Eine beleuchtete 3D-Oberfläche, eine 2D-Kontur derselben Daten und eine 2D-Linie durch den von Ihnen gewählten Schnitt. Verschieben Sie den Schnitt, und alle drei folgen.

Die Oberflächen sind echte Scandaten, kein erzeugtes Rauschen: der Grand Canyon mit 1345 x 1345, Materialoberflächen-Scans mit 1232 x 1028 und 1256 x 684 sowie ein verrauschtes Gelände mit 1451 x 1451. Drehen Sie es, vergrößern Sie es, spreizen Sie die Z-Achse und bewegen Sie das Licht um das Modell.

Gerendert wird mit WebGPU, die Oberfläche wird also von derselben Grafik-Hardware gezeichnet, die auch eine native Anwendung nutzen würde.

WebGPU benötigt einen aktuellen Browser und einen sicheren Kontext. Erscheint die 3D-Ansicht nicht, liegt das fast immer am Browser und nicht am Rechner.

Launch GigaPrime3D Source on GitHub

3 — Tutorial-Demo mit über 100 Beispielen und Codefenster: PeDemo

Dieselbe Beispielsammlung, die mit unserer Desktop-Demo ausgeliefert wird — die, die WinForms-, WPF-, WinUI-, MFC- und Delphi-Entwickler seit dreißig Jahren lesen — nativ in Ihrem Browser auf WebAssembly.

Die Liste steht links, der JavaScript-Quellcode im Bereich rechts oben, und das Diagramm darunter. Klicken Sie ein Beispiel an, und Sie sehen funktionierenden Code und das Diagramm, das er erzeugt, nebeneinander.

Die meisten Charting-Demos zeigen ein fertiges Bild und verstecken den Code hinter einem "Quelltext anzeigen"-Link oder einer Dokumentationsseite, die Monate vom Beispiel entfernt entstanden ist. Bei uns steht das JavaScript, das das Diagramm erzeugt hat, direkt über dem Diagramm, im selben Fenster, immer synchron — weil es die Datei ist, die die Demo gerade ausgeführt hat.

Die Frage, die ein Ingenieur wirklich stellt, ist nicht "kann es das zeichnen?", sondern "wie viel Code kostet mich das?" Die Eigenschaftsliste neben dem Ergebnis zu lesen beantwortet das in etwa fünf Sekunden, und es ist die ehrliche Art, beurteilt zu werden.

Es ist außerdem derselbe Code, den Sie auf dem Desktop schreiben würden. Die JavaScript-Eigenschaftsnamen sind die WinForms-Eigenschaftsnamen, ein C#-Entwickler liest hier also eine Sprache, die er bereits kennt. Den direkten Vergleich finden Sie im Walkthrough.

Launch PeDemo Source on GitHub

Was in PeDemo enthalten ist

Nach Steuerelementtyp gruppiert, so wie die Demo sie gruppiert.

2D-Diagramme

Balken, Linien, Flächen, Splines und gestapelte Darstellungen, mit der Achsen-, Legenden-, Annotations- und Tabellenmechanik, die ein Produktivdiagramm tatsächlich braucht.

• Simple Graph
• Auto Statistical Subsets
• Permanent and Scrolling Subsets
• Right Y Axis Comparison Subsets
• Simple High-Low-Close
• Custom Y Axis
• Null Data Gaps
• Pixel-to-Graph Coordinate Conversion
• Point Colors
• Best Fit Coefficients
• Stacked Bar
• Multiple Sub-Titles
• Multi-Axes Subsets 1
• Multi-Axes Subsets 2
• Hot Spots
• Graph Annotations
• Date-Time Handling
• Real-Time Data Handling
• Direct Cell Writes
• Large Quantity of Data
• Rectilinear Heatmap Stacked Bar
• Hatching
• Mixing Plotting Methods per Subset
• Bitmaps and Gradients
• Background Bitmap
• Floating Stacked Bars
• Table Annotations, Simple
• Table Annotations, Stacked
• Table Annotations, Real-Time Update
• Table Annotations, Table Spaced
• Table Annotations, Hot Spots
• Subset Obstacles
• 16 Axes
• Subset Order Control
• Moveable Table
• Demographic Pyramid
• 2D Point Labels

Wissenschaftliche und technische Diagramme

Der wissenschaftliche Graph: mehrere und überlappende Achsen, doppelt-logarithmische Skalierung, Daten in doppelter Genauigkeit, Datum und Uhrzeit auf die Millisekunde, Konturen, Heatmaps, Spektrogramme und Delaunay-Netze.

• Simple Scientific Graph
• Line Annotations
• Direct Cell Writes (Extended)
• Overlapped Multi-Axes 1
• Overlapped Multi-Axes 2
• Data Cursor
• Date-Time Handling
• Rect Selector
• Inverted Y Axis
• Axis Formatting
• Log-Log Axes
• Financial Scaling
• Manual Min and Max Y
• Manual Line Density
• Double-Precision Data
• Programmatic Horizontal Zooming
• Scatter Plus Data-Point Dragging
• Bubble Chart
• Custom Menus
• Partial Axes
• Vertical Y Axis Grid Numbers
• Fixed Grid Aspect
• Event-Based Custom Grid Numbers
• Multi Point Types and Colors
• Multiple Y Axes with Equally Spaced Gridlines
• Millisecond Date-Time Handling
• High-Low Area
• Error Bars
• 2D Contour Lines
• Large 2D Contour with More Colors
• Wave Data Heatmap Spectrogram
• Bitmaps as Symbols
• Second Contour Legend
• Delaunay Chart
• Angled Text Annotation Justifications

Echtzeit

Die drei Echtzeit-Formen: Anhängen mit Autoskalierung, Anhängen gegen eine festgesetzte Achse und Überschreiben an Ort und Stelle mit wanderndem Schreibkopf. Dazu der Fall der vollständigen Ersetzung, bei dem in jedem Frame jeder Punkt neu ist.

• Real-Time 1 - full data replacement, 400,000 points per update
• Real-Time 2 - append and autoscale
• Real-Time 3 - append against a manual axis
• Real-Time 4 - overwrite in place with a write-head marker

Polar- und Smith-Diagramme

Polar-, Bipolar-, Rosen- und Smith-Diagramme - die HF- und Antennenarbeit, an die sich die meisten JavaScript-Bibliotheken gar nicht erst wagen.

• Simple Polar Chart
• Custom Polar Grid
• Bi-Polar Grid
• Smith Chart
• Rose Chart
• Fancy Tick Marks
• Polar Annotations

Kreisdiagramme

Herausgezogene Segmente, optionale Legenden und Schraffuren.

• Simple Pie Chart
• Exploded Slices
• Optional Legend
• Hatching

Und dann

• Der Walkthrough — bauen Sie eines davon in etwa zehn Minuten von Grund auf.
• Wie ProEssentialsJS abschneidet — gegen Highcharts, SciChart.js, LightningChart JS und die übrigen.
• PE-Query — fragen Sie nach der Eigenschaft, die Sie brauchen, und erhalten Sie eine gegen die kompilierte Engine geprüfte Antwort.
• Lizenzierung — kostenlos für die kommerzielle Nutzung unter 250.000 USD Umsatz, Weitergabe eingeschlossen, ohne Wasserzeichen.
• Fragen Sie uns alles — Support ist kostenlos, unbegrenzt und wird von den Leuten beantwortet, die die Engine geschrieben haben.