Versions Compared

Key

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

Inhalt:

  • Definieren eines TextStyles: Konfigurieren
  • Definieren von BeschriftungenLegendOptions
  • LegendOptions: Konfigurieren der Legendevon BackgroundStyle
  • BackgroundStyle: Konfigurieren Hintergrundfarbe und Ränder

...

  • 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
LegendOptionsfinal Legend 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
//Erstellen einer Konfiguration für das Chart
XdevBarChartConfig config = new XdevBarChartConfig();

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

oder

//Randbreite in PixelDefinieren der Hintergrundfarbe
final Color background = Background.Color("green");

//Zuweisen der Konfiguration für Beschriftungen
configchart.setBackgroundColor(stylebackground);

...

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

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);

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 = new TextStyle.Builder();
textStyle			.setBoldfontName(true"Arial");
textStyle			.setFontNamecolor("Arialred");
textStyle			.setFontSizebold(12);
textStyle			.setItalicitalic(true);
textStyle			.setColorfontSize("Red"12); oder textStyle.setColor("#FFFFFF"
			.build();

//Definieren eines Legendenstyles
LegendOptionsfinal Legend legendOptionslegend = new LegendOptionsLegend.Builder();
legendOptions			.setTextStyletextStyle(textStyle);
legendOptions			.setPositionposition(XdevChartOptionsPosition.POSITION_BOTTOM);
legendOptions			.setMaxLinesmaxLines(5);
legendOptions			.setAlignmentbuild(XdevChartOptions.ALIGNMENT_CENTER);

//Zuweisen der Konfiguration für Beschriftungen
configthis.chart.setBackgroundColor(stylebackground);
configthis.chart.setTitleTextStylesetLegend(textStylelegend);
configthis.chart.setLegendsetTitleTextStyle(legendOptionstextStyle);