/
XdevPieChart
XdevPieChart
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);
Related content
PieChart
More like this
PieChart
More like this
XdevBarChart
XdevBarChart
More like this
XdevLineChart
XdevLineChart
More like this
XdevOrgChart
XdevOrgChart
More like this
XdevComboChart
XdevComboChart
More like this
XDEV Software Corp. - One Embarcadero Center, San Francisco, CA 94111, US
Copyright © 2015. XDEV Software Corp. All rights reserved.