Kategorie | Y-Achse | X-Achse |
---|---|---|
Beverages | 2017 | 550 |
Beverages | 2018 | 540 |
Condiments | 2017 | 350 |
... |
public class ComboChartObject { private String yvalue; private String category; private Integer xvalue; public String getYvalue() { return this.yvalue; } public void setYvalue(final String yvalue) { this.yvalue = yvalue; } public String getCategory() { return this.category; } public void setCategory(final String category) { this.category = category; } public Integer getXvalue() { return this.xvalue; } public void setXvalue(final Integer xvalue) { this.xvalue = xvalue; } } |
//Erstellen Model und hinzufügen der Kategorien final XdevComboChartModel model = new XdevComboChartModel(); model.addCategory("2017"); model.addCategory("2018"); //Füllen der Items model.addItem("Beverages", "2017", 560); model.addItem("Beverages", "2018", 560); model.addItem("Condiments", "2017", 530); model.addItem("Condiments", "2018", 530); //Setzen des Models comboChart.setModel(model); |
Füllen und Definieren der Kategorien
XdevComboChartModel model = new XdevComboChartModel(); //Definieren einer Serie final XdevSeries serie2016 = new XdevSeries(); ser1.setColor("Blue"); //Farbe des Charts wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF") ser1.setLineWidth(2); //Wahl der Linienbreite in Pixel ser1.setPointSize(5); //Wahl der Punktgröße in Pixel ser1.setType("line"); //Auswahl des Charttypes möglich ist: "line","bars","area","steppedArea" ser1.setVisibleInLegend(true); //Auswahl, ob dieser Serie in der Legende angezeigt werden soll. Default Ja. model.addCategory("2017", null); model.addCategory("2018", null); model.addCategory("2016", serie2016); //Parameter 1 ("2017"): Definiert die Beschriftung und wird als Mapping Parameter und Gruppierung verwendet wird //Parameter 2 ("null" oder XdevSeries: ser1): Definiert den Typ und die Konfiguration des Charts. Möglich sind XdevLineChart, XdevAreaChart, XdevSteppedArea und XdevBarChart. Bei NULL wird automatisch ein XdevBarChart gewählt. |
Füllen der Daten
model.addItem("Beverages", "2017", 560); //Parameter 1 ("Beverages"): Wert, welchen in der X-Achse angezeigt werden soll //Parameter 2 ("2017"): Zuweisung zur jeweiligen vorher festgelegten Kategorie (Kategoriemapping) //Parameter 3 (560): Wert für die Y-Achse. Zulässige Datentypen: Integer, Double |
Konfiguration Linien und Punkte:
final XdevSeries serie2016 = new XdevSeries(); serie2016.setColor("Blue"); //Farbe des Charts wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF") serie2016.setLineWidth(2); //Wahl der Linienbreite in Pixel serie2016.setPointSize(5); //Größe der Punkte in Pixel serie2016.setType("line"); //Auswahl des Charttypes möglich ist: "line","bars","area","steppedArea" serie2016.setVisibleInLegend(true); //Auswahl, ob dieser Serie in der Legende angezeigt werden soll. Default Ja. serie2016.setCurveType("function"); //Geschwungene Linien ("function") oder gerade Striche ("none") serie2016.setPointShape(Options.POINTSHAPE_SQUARE); //Form der Punkte. Mögliche Werte: Options.POINTSHAPE_CIRCLE, Options.POINTSHAPE_DIAMOND, Options.POINTSHAPE_POLYGON, Options.POINTSHAPE_SQUARE, Options.POINTSHAPE_STAR, Options.POINTSHAPE_TRIANGLE //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., serie2016.setLineDashStyle(places); |
Positionierung und Größe
XdevComboChartConfig config = new XdevComboChartConfig(); 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
XdevComboChartConfig config = new XdevComboChartConfig(); 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
XdevComboChartConfig config = new XdevComboChartConfig(); 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); |