Inhalt:
Optimale Datenstruktur (Datenbank):
Kategorie | Y-Achse | X-Achse |
---|
Beverages | 2017 | 550 |
Beverages | 2018 | 540 |
Condiments | 2017 | 350 |
... |
|
|
Optimale Objektstruktur (Java):
Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
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: Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
//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
Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | model.addCategory(String value); |
---|
linenumbers | true |
---|
|
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
Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
title | model.addItem(String value, String value2, Integer value3) |
---|
linenumbers | true |
---|
|
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: Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
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 Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
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 Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
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 Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
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 Code Block |
---|
language | java |
---|
theme | Eclipse |
---|
firstline | 1 |
---|
linenumbers | true |
---|
|
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); |