Inhalt:
- Daten- / Objektstruktur
- Beispiel Füllen mit Daten
- Chartkonfiguration
- Konfiguration Linie und Punkte
- Konfiguration Chartgröße
- Konfiguration Farben
- Konfiguration Texte Konfiguration TooltipsProperties
Anchor | ||||
---|---|---|---|---|
|
Kategorie | Y-Achse | X-Achse |
---|---|---|
Beverages | 2017 | 550 |
Beverages | 2018 | 540 |
Condiments | 2017 | 350 |
... |
Optimale Objektstruktur (Java):
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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;
}
} |
Anchor | ||||
---|---|---|---|---|
|
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
final ChartModel model = ChartModel.New() .addColumn(Column.New(Type.STRING, "year", "Jahr")) .addColumn(Column.New(Type.NUMBER, "salesbolivia", "VerkäufeBolivia")) .addColumn(Column.New(Type.NUMBER, "customerecuador", "KundenEcuador")); model.addRow("2014", 1500, 450); model.addRow("2015", 805, 685); model.addRow("2016", 920, 980); model.addRow("2017", 1250, 520); //Setzen des Models comboChart.setModel(model); |
API und Methoden:
Füllen und Definieren der Kategorien
Code Block | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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 |
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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); |
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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); |
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 |
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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 |
...
Code Block | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
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);addColumn(Column.New(Type.NUMBER, "madagascar", "Madagascar")) .addColumn(Column.New(Type.NUMBER, "papua New Guinea", "Papua New Guinea")) .addColumn(Column.New(Type.NUMBER, "rwanda", "Rwanda")) .addColumn(Column.New(Type.NUMBER, "average", "Average")); model.addRow("2004/05", 165, 938, 522, 998, 450, 614.6); model.addRow("2005/06", 135, 1120, 599, 1268, 288, 682); model.addRow("2006/07", 157, 1167, 587, 807, 397, 623); model.addRow("2007/08", 139, 1110, 615, 968, 215, 609.4); model.addRow("2008/09", 136, 691, 629, 1026, 366, 569.6); //Setzen des Models comboChart.setModel(model); |
Anchor | ||||
---|---|---|---|---|
|
API und Methoden:
Properties | ||
---|---|---|
Series Configuration | The shape of individual data elements: 'circle', 'triangle', 'square', 'diamond', 'star', or 'polygon'.
For detailed informations see: https://developers.google.com/chart/interactive/docs/points |