ngx charts

NGX-Charts

Deklarativer Chart -Rahmen für Angular!

NGX-Charts sind einzigartig, weil wir weder D3 noch eine andere Diagramm-Engine einwickeln. Es verwendet Angular, um die SVG -Elemente mit all seiner Bindungs- und Geschwindigkeitsgüte zu rendern und zu animieren, und verwendet D3 für die hervorragenden Mathematikfunktionen, Skalen, Achse und Formgeneratoren. Durch Angular wird uns das gesamte Rendering zu endlosen Möglichkeiten öffnen, die die Winkelplattform wie AOT, SSR usw. bietet.

Die Datenvisualisierung ist eine Wissenschaft, aber das bedeutet nicht, dass sie hässlich sein muss. Eine der großen Anstrengungen, die wir beim Erstellen dieses Projekts unternommen haben, ist es, die Charts ästhetisch ansprechend zu machen. Die Stile sind auch durch CSS vollständig anpassbar, sodass Sie sie so überschreiben können, wie Sie möchten.

Außerdem ist das Erstellen benutzerdefinierter Diagramme möglich, indem die verschiedenen NGX-Charts-Komponenten genutzt werden, die über das NGX-Charts-Modul ausgesetzt sind.

Weitere Informationen finden Sie in der Dokumentation und den Demos.

Merkmale

Diagrammtypen

• Horizontale und vertikale Balkendiagramme (Standard, gruppiert, gestapelt, normalisiert)
• Linie
• Bereich (Standard, gestapelt, normalisiert)
• Kuchen (explodierbar, Netz, benutzerdefinierte Legenden)
• Blase
• Krapfen
• Messgerät (linear und radial)
• Heatmap
• Treemap
• Zahlenkarten
• Sankey Diagramm

Anpassung

• Autoscaling
• Timeline -Filterung
• Linieninterpolation
• Konfigurierbare Achsenbezeichnungen
• Legenden (Etiketten & Gradient)
• Fortgeschrittene Label -Positionierung
• Echtzeit-Datenunterstützung
• Erweiterte Tooltips
• Datenpunktereignis Handler
• Funktioniert mit ngupgrade

Installieren

Um NGX-Charts in Ihrem Projekt zu verwenden, installieren Sie es über NPM:

 npm i @swimlane/ngx-charts --save

Benutzerdefinierte Diagramme

Um zu erfahren, wie Sie die NGX-Charts-Komponenten verwenden, um benutzerdefinierte Diagramme zu erstellen und Beispiele zu finden, finden Sie auf unserer Seite "benutzerdefinierte Diagramme".

Freigeben

• Checkout Master ( git checkout master )
• Pull Master ( git pull )
• Knotenmodule aktualisieren ( npm ci )
• Tests ausführen ( npm test )
• Untersuchen Sie das Protokoll, um die nächste Version (XYZ) zu bestimmen
• Führen Sie git checkout -b release/XYZ
• Aktualisieren Sie die Version in projects/swimlane/ngx-charts/package.json .
• Aktualisieren Sie ChangeLog in projects/docs/changelog.md
• Run git commit -am "(release): XYZ"
• Führen Sie git tag XYZ
• Führen Sie git push origin HEAD --tags
• Run npm run publish:lib
• PR einreichen

Credits

ngx-charts ist ein Swimlane Open-Source-Projekt; Wir glauben daran, der Open-Source-Community etwas zurückzugeben, indem wir einige der Projekte teilen, die wir für unsere Bewerbung erstellen. Swimlane ist eine automatisierte Plattform für Cyber ​​-Sicherheitsvorgänge und Vorfälle, die es Cyber ​​-Sicherheitsteams ermöglicht, Bedrohungsinformationen zu nutzen, die Reaktion der Vorfälle zu beschleunigen und Sicherheitsvorgänge zu automatisieren.

Secops Hub ist eine offene, produktagnostische Online-Community für Sicherheitsprofis, um Ideen, Anwendungsfälle, Best Practices und Incident-Reaktionsstrategien auszutauschen.