/
XdevAreaChart
XdevAreaChart
Inhalt:
- Daten- / Objektstruktur
- Beispiel Füllen mit Daten
- Chartkonfiguration
Anmerkung: Beide Charts XdevAreaChart und XdevSteppedAreaChart besitzen die selben Implementierungen. Es ändern sich nur die Name, die Einstellungen sind aber identisch.
Optimale Datenstruktur (Datenbank):
Kategorie | Y-Achse | X-Achse |
---|---|---|
RapidClipse | 2013 | 4500 |
RapidClipse | 2014 | 9500 |
RapidClipse | 2015 | 10850 |
... | ||
XDEV 5 | 2013 | 1200 |
XDEV 5 | 2014 | 8500 |
... |
Optimale Objektstruktur (Java)
public class AreaChartObject { private String category; private String y_axis; private Integer x_axis; public String getCategory() { return this.category; } public void setCategory(final String category) { this.category = category; } public String getY_axis() { return this.y_axis; } public void setY_axis(final String y_axis) { this.y_axis = y_axis; } public Integer getX_axis() { return this.x_axis; } public void setX_axis(final Integer x_axis) { this.x_axis = x_axis; } }
Beispiel: Füllen der Daten
//Erstellen Model und hinzufügen der Kategorien XdevAreaChartModel model = new XdevAreaChartModel(); model.addCategory("RapidClipse"); model.addCategory("XDEV 5"); //Füllen der Items model.addItem("RapidClipse", "2015", 6500); model.addItem("RapidClipse", "2016", 4321); model.addItem("RapidClipse", "2017", 9460); model.addItem("RapidClipse", "2018", 7450); model.addItem("XDEV 5", "2015", 1500); model.addItem("XDEV 5", "2016", 2850); model.addItem("XDEV 5", "2017", 685); model.addItem("XDEV 5", "2018", 4850); //Setzen des Models areaChart.setModel(model);
API und Methoden:
Füllen und Definieren der Kategorien
model.addCategory(String value);
model.addCategory("RapidClipse"); model.addCategory("XDEV 5"); //Parameter 1 ("RapidClipse"): definiert die Beschriftung und wird als Mapping Parameter und Gruppierung verwendet wird
Füllen der Daten
model.addItem(String value, String value2, Integer value3)
model.addItem("RapidClipse", "2015", 6500); //Parameter 1 ("RapidClipse"): Wert, welchen in der X-Achse angezeigt werden soll //Parameter 2 ("2015"): Zuweisung zur jeweiligen vorher festgelegten Kategorie (Kategoriemapping) //Parameter 3 (6500): Wert für die Y-Achse. Zulässige Datentypen: Integer, Double
Positionierung und Größe
XdevAreaChartConfig config = new XdevAreaChartConfig(); 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 Linien und Punkte
XdevAreaChartConfig config = new XdevAreaChartConfig(); //Konfiguration der Punkte config.setPointShape("circle"); //Form der Punkte. Mögliche Werte: Options.POINTSHAPE_CIRCLE, Options.POINTSHAPE_DIAMOND, Options.POINTSHAPE_POLYGON, Options.POINTSHAPE_SQUARE, Options.POINTSHAPE_STAR, Options.POINTSHAPE_TRIANGLE config.setPointSize(10); //Größe der Punkte in Pixel //Konfiguration der Linien List<Integer> places = Arrays.asList(4,4); //Strichformatierung: Bsp: 4,4 --> 4xMinus 4xLeer Bsp: 4,1,5 --> 4xMinus 4xLeer 5xMinus 4xMinus 4xLeer 5xMinus usw., this.config.setLineDashStyle(places); this.config.setLineWidth(5); //Setzen der Linienbreite config.setCurveType("function"); //Geschwungene Linien ("function") oder gerade Striche ("none")
Konfiguration Farben
XdevAreaChartConfig config = new XdevAreaChartConfig(); config.setBackgroundColor(...); //Siehe API Allgemein "BackgroundStyle" //Eine Liste an Farben die dann der Reihe nach an die Kategorien vergeben werden List<String> places = Arrays.asList("#FFFFFF", "Red", "#F4g6uz"); config.setColors(places); //Zuweisen der Farbliste
Konfiguration Texte
XdevAreaChartConfig config = new XdevAreaChartConfig(); 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
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);
, multiple selections available,
Related content
AreaChart
AreaChart
More like this
AreaChart
AreaChart
More like this
XdevLineChart
XdevLineChart
More like this
XdevBarChart
XdevBarChart
More like this
XdevPieChart
XdevPieChart
More like this
XdevOrgChart
XdevOrgChart
More like this
XDEV Software Corp. - One Embarcadero Center, San Francisco, CA 94111, US
Copyright © 2015. XDEV Software Corp. All rights reserved.