/
XdevLineChart
XdevLineChart
Inhalt:
- Daten- / Objektstruktur
- Beispiel Füllen mit Daten
- Chartkonfiguration
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 LineChartObject { 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 XdevLineChartModel model = new XdevLineChartModel(); model.addXCategory("Year", ColumnType.STRING); model.addYCategory("RapidClipse"); model.addYCategory("XDEV 5"); //Füllen der Items model.addItem("RapidClipse", "2013", 4500); model.addItem("RapidClipse", "2014", 9500); model.addItem("RapidClipse", "2015", 10850); model.addItem("RapidClipse", "2016", 6500); model.addItem("RapidClipse", "2017", 1500); model.addItem("RapidClipse", "2018", 3500); model.addItem("XDEV 5", "2013", 1200); model.addItem("XDEV 5", "2014", 8500); model.addItem("XDEV 5", "2015", 6500); model.addItem("XDEV 5", "2016", 4350); model.addItem("XDEV 5", "2017", 7521); model.addItem("XDEV 5", "2018", 850); //Setzen des Models lineChart.setModel(model);
API und Methoden:
Füllen und Definieren der Kategorien
model.addCategory(String value);
model.addXCategory("Year"); //Parameter 1 ("Year"): definiert die Beschriftung der X-Achse model.addYCategory("RapidClipse"); model.addYCategory("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", "2013", 4500); //Parameter 1 ("RapidClipse"): Wert, welchen in der X-Achse angezeigt werden soll //Parameter 2 ("2013"): Zuweisung zur jeweiligen vorher festgelegten Kategorie (Kategoriemapping) //Parameter 3 (4500): Wert für die Y-Achse. Zulässige Datentypen: Integer, Double
Konfigurieren der Chartausrichtung
XdevLineChartConfig config = new XdevLineChartConfig(); config.setOrientation(Options.ORIENTATION_VERTICAL); //Ausrichtung des Charts. Mögliche Werte: Options.ORIENTATION_VERTICAL, Options.ORIENTATION_HORIZONTAL
Konfiguration Linien und Punkte:
XdevLineChartConfig config = new XdevLineChartConfig(); //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")
Positionierung und Größe
XdevLineChartConfig config = new XdevLineChartConfig(); final ChartArea area = new ChartArea(); area.setHeigth("100"); //Höhe des Chart area.setWidth("100"); //Breite des Chart area.setLeft("100"); //Abstand des Chart von Links in Pixel area.setRight("100"); //Abstand des Chart von Links in Pixel area.setTop("100"); //Abstand des Chart von Links in Pixel config.setChartArea(area);
Konfiguration Farben
XdevLineChartConfig config = new XdevLineChartConfig(); 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
XdevLineChartConfig config = new XdevLineChartConfig(); 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, "selection" --> MouseKlick config.setTooltip(tooltip);
, multiple selections available,
Related content
XdevTimelineChart
XdevTimelineChart
More like this
XdevPieChart
XdevPieChart
More like this
XdevOrgChart
XdevOrgChart
More like this
XdevBarChart
XdevBarChart
More like this
LineChart
LineChart
More like this
LineChart
LineChart
More like this
XDEV Software Corp. - One Embarcadero Center, San Francisco, CA 94111, US
Copyright © 2015. XDEV Software Corp. All rights reserved.