Inhalt:
- Daten- / Objektstruktur
- Beispiel Füllen mit Daten
- Chartkonfiguration
Optimale Datenstruktur (Datenbank):
Kategorie | Y-Achse | X-Achse |
---|---|---|
Beverages | 2017 | 550 |
Beverages | 2018 | 540 |
Condiments | 2017 | 350 |
... |
Optimale Objektstruktur (Java):
public class BarChartObject { private String Y_Achse; private String kategorie; private Integer X_Achse; public String getY_Achse() { return this.Y_Achse; } public void setY_Achse(final String y_Achse) { this.Y_Achse = y_Achse; } public String getKategorie() { return this.kategorie; } public void setKategorie(final String kategorie) { this.kategorie = kategorie; } public Integer getX_Achse() { return this.X_Achse; } public void setX_Achse(final Integer x_Achse) { this.X_Achse = x_Achse; } }
Beispiel füllen der Daten:
//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);
API und Methoden:
Füllen und Definieren der Kategorien
model.addCategory(String value);
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(String value, String value2, Integer value3)
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 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 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);