Inhalt:
Optimale Datenstruktur (Datenbank)
Kategory | Wert |
---|---|
Bverages | 393 |
Condiments | 507 |
Confections | 386 |
Optimale Objektstruktur (Java)
public class PieChartObject { private String category; private Integer value; public String getCategory() { return this.category; } public void setCategory(final String category) { this.category = category; } public Integer getValue() { return this.value; } public void setValue(final Integer value) { this.value = value; } }
Beispiel: Füllen der Daten
XdevPieChartModel model = new XdevPieChartModel(); model.addItem("Beverages", 393, null); model.addItem("Condimants", 507, null); model.addItem("Confections", 386, null); chart.setModel(model);
oder per Schleife aus Query-Methode:
final XdevPieChartModel model = new XdevPieChartModel(); new ProductDAO().getProductsByCategoryForChart().forEach(p -> { model.addItem(p.getCategory().getCategoryname(), (int) p.getAmount(), null); }); chart.setModel(model);
API und Methoden:
Füllen der Daten
model.addItem(String value, String value2, Integer value3)
model.addItem("Beverages", 393, null); //Parameter 1 ("Beverages"): Wert als Kategoriebenennung für die "Kuchenstücke" //Parameter 2 (393): Wert für die Größe der Stücke. Zulässige Datentypen: Integer, Double //Parameter 3 (Slice): Konfigurationsobjekt für dieses "Kuchenstück". Ist keine besondere Konfiguration notwendig wird einfach NULL übergeben.
Positionierung und Größe des Pie innerhalb des Chartbereichs
XdevPieChartConfig config = new XdevPieChartConfig(); final ChartArea area = new ChartArea(); area.setHeigth("100"); //Höhe des Pie area.setWidth("100"); //Breite des Pie area.setLeft("100"); //Abstand des Pie von Links in Pixel area.setRight("100"); //Abstand des Pie von Links in Pixel area.setTop("100"); //Abstand des Pie von Links in Pixel config.setChartArea(area);
Konfiguration "XdevPieChartConfig" allgemein:
XdevPieChartConfig config = new XdevPieChartConfig(); config.setIs3D(false); //3D Darstellung ein- oder ausschalten config.setPieHole(0.4); //Darstellung als Donut-Chart ein- oder ausschalten. Wert zwischen 0 und 1 in Abhängigkeit des Pie Radius config.setPieStartAngle(3); //Drehung des PieCharts in Grad
Konfiguration Farben und Ränder
XdevPieChartConfig config = new XdevPieChartConfig(); config.setBackgroundColor(...); //Siehe API Allgemein "BackgroundStyle" config.setPieSliceBorderColor("Red"); //Setzen der Farben für die einzelnen Slices config.setPieResidueSliceColor("red"); //Setzen allgemeine Schriftfarbe des Titles, SubTitles
Konfiguration Texte
XdevPieChartConfig config = new XdevPieChartConfig(); config.setLegend(...); //Siehe API Allgemein "LegendOptions" config.setTitleTextStyle(...); //Siehe API Allgemein "TextStyle" config.setFontName(""); //Wahl der Schriftart (Schriftart muss vom Browser unterstützt werden) config.setFontSize(15); //Setzen allgemeine Schriftgröße im Chart config.setTitle("Sales Overview"); //Setzen ChartTitel //Konfigurieren welcher Wert im Slice als Beschriftung angezeigt werden soll. //Mögliche Werte // - XdevPieChartConfig.PIESLICETEXT_PERCENTAGE --> Prozentsatz des Slice in Abhängigkeit zu allen anderen // - XdevPieChartConfig.PIESLICETEXT_VALUE --> Wert des Slices // - XdevPieChartConfig.PIESLICETEXT_LABEL --> Name des Slices / Name der Kategorie // - XdevPieChartConfig.PIESLICETEXT_NONE --> Kein Text wird im Slice angezeigt config.setPieSliceText(PIESLICETEXT_VALUE);
Konfiguration Grenzwerte
XdevPieChartConfig config = new XdevPieChartConfig(); //Grenze für die Zusammenfassung mehrerer Slices. Kategorien welche einen bestimmte prozentuellen Wert nicht Überschreiten //werden zu einem Slice zusammengefasst und als "Other" aufgeführt. Mögliche Werte 0 und 1 bezogen auf den prozentuellen Anteil. config.setSliceVisibilityThreshold(0.15); config.setPieResidueSliceLabel("Sonstige"); //Setzen des Titels für die zusammengefassten Kategorien Default: "Others"
Konfiguration eines "XdevPieSlice" und Zuweisung über die .addItem(...) Methode:
XdevPieSlice slice = new XdevPieSlice(); slice.setColor("red"); //Farbe des XdevPieSlice wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF") slice.setOffset(0.3); //Ausrückung des XdevPieSlice. Wert zwischen 0 und 1 in Abhängigkeit des Pie Radius slice.setTextStyle(null); //TextStyle Objekt siehe dazu API Allgemein model.addItem("Beverages", 393, slice);
Konfiguration des Tooltips und wann er angezeigt werden soll
Tooltip tooltip = new Tooltip(); tooltip.setisHtml(true); //Tooltip per HTML Konfigurierbar Ja / Nein tooltip.setTrigger("focus"); Mögliche Werte: "focus" --> MouseOver, "none" --> kein Tooltip, "selektion" --> MouseKlick config.setTooltip(tooltip);