Problem
Sie wollen Charts in Ihren Html User Dialogen anzeigen.
Lösung
PrimeFaces hat out of the box diverse Chart Komponente die einfach in die Html User Dialoge integriert werden können.
In diesem Tutorial zeige ich, wie man Bar-, Line- und MeterGaugeChart konfiguriert und in einem Html User Dialog anzeigt.
 |
| Abb. 1: Chart Demo |
SVN
Sie können das fertige Projekt per SVN von http://xpert-ivy-hacker-source-code.googlecode.com/svn/trunk/Forms in den Xpert.ivy Designer importieren.
Code
Charts in PrimeFaces zu erstellen ist relativ einfach. Alles was man braucht ist das richtige ChartModel. Für Bar- und Linechart ist es das CartesianChartModel. Für das MeterGaugeChart das MeterGaugeChartModel.
Hier ein Beispiel wie man das Barchart Konfiguriert.
Code-Snippet 1: Barchart konfigurieren
Das CartesianChartModel an sich hat keine Daten. Die Daten werden durch ChartSeries Objekte konfiguriert. Im Fall von Code-Snippet 1 sind dies 2.
Das Linechart kann fast gleich konfiguriert werden, mit dem Unterschied, dass anstelle der ChartSeries LineChartSeries verwendet werden.
Code-Snippet 2: Linechart konfigurieren
Zu guter Letzt noch ein spezielles Chart: Das MeterGaugeChart. Oder in Deutsch einfach TachometerChart.
Code-Snippet 3: MeterGaugeChart konfigurieren
Im Gegensatz zu den 2 vorherigen Charts benötigt das MeterGaugeChart ein MeterGaugeChartModel. Dieses Model nimmt als Konstruktor-Parameter den Tachostand und die Intervalle, in die der Tacho eingeteilt ist, entgegen.
Die Charts selber in den Html User Dialog einzubetten ist trivial.
Code-Snippet 4: Charts in Html User Dialog einbetten
Jedes Chart bietet diverse Attribute um Aussehen und Verhalten zu steuern. Am besten schauen Sie sich die PrimeFace Demos und die PrimeFaces Dokumentation dazu an.
Das CartesianChartModel an sich hat keine Daten. Die Daten werden durch ChartSeries Objekte konfiguriert. Im Fall von Code-Snippet 1 sind dies 2.
Das Linechart kann fast gleich konfiguriert werden, mit dem Unterschied, dass anstelle der ChartSeries LineChartSeries verwendet werden.
Code-Snippet 2: Linechart konfigurieren
Zu guter Letzt noch ein spezielles Chart: Das MeterGaugeChart. Oder in Deutsch einfach TachometerChart.
Code-Snippet 3: MeterGaugeChart konfigurieren
Im Gegensatz zu den 2 vorherigen Charts benötigt das MeterGaugeChart ein MeterGaugeChartModel. Dieses Model nimmt als Konstruktor-Parameter den Tachostand und die Intervalle, in die der Tacho eingeteilt ist, entgegen.
Die Charts selber in den Html User Dialog einzubetten ist trivial.
Code-Snippet 4: Charts in Html User Dialog einbetten
Jedes Chart bietet diverse Attribute um Aussehen und Verhalten zu steuern. Am besten schauen Sie sich die PrimeFace Demos und die PrimeFaces Dokumentation dazu an.
Über den Author: Heinrich Spreiter ist der Gründer von xpertivyhacker.ch. Kontaktieren Sie ihn auf Xing und Twitter
Keine Kommentare:
Kommentar veröffentlichen
Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.