Versions Compared

Version Old Version 4 New Version Current
Changes made by

Christian K

Manuel

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Beispiel konfigurieren der Beschriftungen / Legenden / Farben

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
//Erstellen einer Konfiguration für das Chart
XdevBarChartConfig config = new XdevBarChartConfig();

//Definieren eines Backgroundstyles
final BackgroundStyle style = new BackgroundStyle();
style.setFill("white");
style.setStroke("black");
style.setStrokeWidth(10);

//Definieren eines Texstyles
final TextStyle textStyle = new TextStyle();
textStyle.setBold(true);
textStyle.setFontName("Arial");
textStyle.setFontSize(12);
textStyle.setItalic(true);
textStyle.setColor("Red"); oder textStyle.setColor("#FFFFFF");

//Definieren eines Legendenstyles
LegendOptions legendOptions = new LegendOptions();
legendOptions.setTextStyle(textStyle);
legendOptions.setPosition(XdevChartOptions.POSITION_BOTTOM);
legendOptions.setMaxLines(5);
legendOptions.setAlignment(XdevChartOptions.ALIGNMENT_CENTER);

//Zuweisen der Konfiguration für Beschriftungen
config.setBackgroundColor(style);
config.setTitleTextStyle(textStyle);
config.setLegend(legendOptions);

...

Inhalt:

  • Definieren eines TextStyles
  • Definieren von LegendOptions
  • Konfigurieren von BackgroundStyle
  • Konfigurieren von Größe und Position

Anchor
TextStyles
TextStyles
Definieren eines TextStyles

Über das TextStyle Objekt lassen sich alle Texte des Chart beeinflussen und konfigurieren. Ein Chart kann unterschiedlichen Stellen unterschiedliche TextStyles besitzen.

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
//Erstellen einer Konfiguration für das Chart
XdevBarChartConfig config = new XdevBarChartConfig();

//Definieren eines Texstyles
final TextStyle textStyle = new TextStyle.Builder();
textStyle			.setFontNamefontName("Arial"); //Wahl der Schriftart (Schriftart muss vom Browser unterstützt werden) 
textStyle.setBold(true);			.color("red") // Wahl der Schriftfarbe wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
			.bold() //Fettdruck an- oder ausschalten
textStyle			.setItalicitalic(true); //Kusivdruck an- oder ausschalten
textStyle			.setFontSizefontSize(12); //Setzen der Schriftgröße
textStyle			.setColorbuild("Red"); oder
textStyle.setColor("#FFFFFF");
//Wahl der Schriftfarbe wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")

//Zuweisen der Konfiguration für Beschriftungen		
configthis.chart.setTitleTextStyle(textStyle);

Anchor
LegendOptions
LegendOptions
Definieren von LegendOptions

Über das Objekt "LegendOptions" lassen sie die Legenden der einzelnen Chart beeinflussen und konfigurieren.

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
//Erstellen einer Konfiguration für das Chart
XdevBarChartConfig config = new XdevBarChartConfig();

//Definieren eines Legendenstyles
final LegendOptionsLegend legendOptionslegend = new LegendOptionsLegend.Builder();
legendOptions			.setTextStyletextStyle(textStyle); //Setzen eines TextStyles (siehe oben)
legendOptions			.setPositionposition(XdevChartOptionsPosition.POSITION_BOTTOM); //Auswahl der Position für die Legende. Auswahlmöglichkeiten: .POSITION_BOTTOM, .POSITION_TOP, .POSITION_RIGHT, .POSITION_LEFT
legendOptions			.setMaxLinesmaxLines(5); //Befindet sich die Legende Über dem Chart (POSITION_TOP) kann hier entschieden werden bis auf wie viele Zeilen umgebrochen werden darf
legendOptions			.setAlignmentbuild(XdevChartOptions.ALIGNMENT_CENTER); //Anordnung der legende an der
jeweiligen
Position. Auswahlmöglichkeiten: .START, .CENTER, .END

//Zuweisen der Konfiguration für Beschriftungen
configthis.chart.setLegend(legendOptionslegend);

Anchor
BackgroundStyle
BackgroundStyle
Konfigurieren

...

von BackgroundStyle

Über das Objekt "LegendOptionsBackgroundStyle" lassen sie die Legenden der einzelnen Chart beeinflussen und konfigurieren.

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
//ErstellenDefinieren eines einerBackgroundStyles
Konfigurationfinal fürStrokeFill dasbackground Chart
XdevBarChartConfig config = new XdevBarChartConfig();

//Definieren eines BackgrundStyles
final BackgroundStyle style = new BackgroundStyle();
style.setFill("white"); //Wahl der Hintergrundfarben= Background.StrokeFill("White", 40, "#FFFFFF");
Param1: stroke("White") 	//Wahl der Hintergrundfarben wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
Param2: strokeWidth(40)	 	//Randbreite in Pixel
Param3: fill("#FFFFFF") 	//Wahl der Farbe für den Rand des Charts wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
style.setStroke("black

oder

//Definieren der Hintergrundfarbe
final Color background = Background.Color("green");

//WahlZuweisen der Farbe für den Rand des Charts wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
style.setStrokeWidth(10); //Randbreite in Pixel Konfiguration für Beschriftungen
chart.setBackgroundColor(background);

Anchor
Position und Größe
Position und Größe
Konfigurieren von Größe und Position

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
final ChartArea chartArea = ChartArea.New("100", "100", "500", "500"); // Parameter für Abstand links, rechts und Höhe, Breite des Charts

this.chart.setChartArea(chartArea);

Beispiel:

Code Block
languagejava
themeEclipse
firstline1
linenumberstrue
//Definieren der Hintergrundfarbe
final Color background = Background.Color("green");

//Definieren eines Texstyles
final TextStyle textStyle = TextStyle.Builder()
			.fontName("Arial")
			.color("red")
			.bold()
			.italic()
			.fontSize(12)
			.build();

//Definieren eines Legendenstyles
final Legend legend = Legend.Builder()
			.textStyle(textStyle)
			.position(Position.BOTTOM)
			.maxLines(5)
			.build();

//Zuweisen der Konfiguration für Beschriftungen
config.setBackgroundColor(stylethis.chart.setBackgroundColor(background);
this.chart.setLegend(legend);
this.chart.setTitleTextStyle(textStyle);