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
final ChartModel model = ChartModel.New() .addColumn(Column.New(Type.STRING)) .addColumn(Column.New(Type.NUMBER)); model.addRow("Katze", 50); model.addRow("Hund", 25); model.addRow("Schlange", 25); this.pieChart.setModel(model);
oder per Schleife aus Query-Methode:
final ChartModel model = ChartModel.New() .addColumn(Column.New(Type.STRING)) .addColumn(Column.New(Type.NUMBER)); new ProductDAO().getProductsByCategoryForChart().forEach(p -> { model.addRow(p.getCategory().getCategoryname(), (int)p.getAmount()); }); chart.setModel(model);
API und Methoden:
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:
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
config.setPieSliceBorderColor("Red"); //Setzen der Farben für die einzelnen Slices config.setPieResidueSliceColor("red"); //Setzen allgemeine Schriftfarbe des Titles, SubTitles
Konfiguration Texte
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. pieChart.setPieSliceText(PieSliceText.LABEL); //Prozentsatz des Slice in Abhängigkeit zu allen anderen pieChart.setPieSliceText(PieSliceText.PERCENTAGE); //Wert des Slices pieChart.setPieSliceText(PieSliceText.VALUE); //Name des Slices / Name der Kategorie pieChart.setPieSliceText(PieSliceText.NONE); //Kein Text wird im Slice angezeigt
Konfiguration Grenzwerte
//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 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);