Beispiel:
Inhalt:
Optimale Datenstruktur (Datenbank):
...
| Code Block |
|---|
| language | java |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
//Erstellen Model und hinzufügen der Kategorien
final ChartModel model = ChartModel.New()
.addColumn(Column.New(Type.STRING, "year", "Jahr"))
.addColumn(Column.New(Type.NUMBER, "iphone", "iPhone"))
.addColumn(Column.New(Type.NUMBER, "android", "Android"));
//Füllen der Items
model.addRow("2014", 1500, 1200);
model.addRow("2015", 805, 700);
model.addRow("2016", 920, 600);
model.addRow("2017", 1250, 1500);
//Setzen des Models
barChart.setModel(model); |
...
Optionen und
...
Properties:
Konfiguration allgemein
...
| Properties |
|
|---|
| Orientation | The orientation of the chart. When set to'vertical', rotates the axes of the chart so that (for instance) a column chart becomes a bar chart, and an area chart grows rightward instead of up: |
...
this.barChart.setOrientation(Orientation.VERTICAL); |
|
...
final ChartModel model = ChartModel.New()
.addColumn(Column.New(Type.STRING, "year", "Jahr"))
//Parameter 1 ("2017"): definiert die Beschriftung und wird als Mapping Parameter und Gruppierung verwendet wird...
| StackMode | The options for isStacked are: false — elements will not stack. This is the default option.true — stacks elements for all series at each domain value.'percent' — stacks elements for all series at each domain value and rescales them such that they add up to 100%, with each element's value calculated as a percentage of 100%.'relative' — stacks elements for all series at each domain value and rescales them such that they add up to 1, with each element's value calculated as a fraction of 1.'absolute' — functions the same as isStacked: true.
|
...
model.addRow("2014", 1500, 1200);
//Parameter 1 ("Jahr"): Wert, welchen in der X-Achse angezeigt werden soll
//Parameter 2 (632): Zuweisung zur jeweiligen vorher festgelegten Kategorie (Kategoriemapping)
//Parameter 3 (530): Wert für die Y-Achse. Zulässige Datentypen: Integer, Doublethis.barChart.setStackMode(StackMode.TRUE); |
|
Achsenkonfiguration
...
| language | java |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
...
| Properties |
|
|---|
| AxisTitlePosition | Where to place the axis titles, compared to the chart area. Supported values: | Code Block |
|---|
| barChart.setAxisTitlesPosition(AxisTitlesPosition.IN); |
|
| HAxis / VAxis | An object with members to configure various horizontal axis elements. To specify properties of this object, you can use object literal notation, as shown here: | Code Block |
|---|
| language | java |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
|
...
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
barChart.setChartArea(area);Konfiguration Farben | Properties |
|
|---|
| colors | The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example:colors:['red','#004411']. |
...
List<String> colors= Arrays.asList("#FFFFFF", "Red", "#F4g6uz");
barChart.setColors(colors |
|
...
| Code Block |
|---|
| language | java |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
|
// 1. Erzeugen einer Achsenkonfiguration
// 2. Setzen der Achsenskalierung
// 3. Aktivierung der Drehung der Achsenbeschriftungen
// 4. Setzen des Winkels für die Beschriftung in Grad
HAxis hAxis = new HAxis("Sold Produkts");
XdevChartUtils.setHAxisScaling(hAxis, 50d, -500d, +800d); //Skalierung der Achse siehe API Allgemein
hAxis.setSlantedText(true); //Achsenbeschriftung gedreht Ja oder Nein
hAxis.setSlantedTextAngle(15); //Grad der Drehung der Achsenbeschriftung
//Zuweisen der Achsenkonfiguration
barChart.setvAxis(vAxis);
|
...
| language | java |
|---|
| theme | Eclipse |
|---|
| firstline | 1 |
|---|
| linenumbers | true |
|---|
...
Konfiguration von Texten und Legenden siehe API Allgemein
...