Inhalt:
- TextStyles: Konfigurieren von Beschriftungen
- LegendOptions: Konfigurieren der Legende
- BackgroundStyle: Konfigurieren Hintergrundfarbe und Ränder
- Größe / Position: Konfigurieren Größe und Position
Definieren eines TextStyles
Über das TextStyle Objekt lassen sich alle Texte des Chart beeinflussen und konfigurieren. Ein Chart kann unterschiedlichen Stellen unterschiedliche TextStyles besitzen.
//Definieren eines Texstyles final TextStyle textStyle = TextStyle.Builder() .fontName("Arial") //Wahl der Schriftart (Schriftart muss vom Browser unterstützt werden) .color("red") // Wahl der Schriftfarbe wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF") .bold() //Fettdruck an- oder ausschalten .italic() //Kusivdruck an- oder ausschalten .fontSize(12) //Setzen der Schriftgröße .build(); //Zuweisen der Konfiguration für Beschriftungen this.chart.setTitleTextStyle(textStyle);
Definieren von LegendOptions
Über das Objekt "LegendOptions" lassen sie die Legenden der einzelnen Chart beeinflussen und konfigurieren.
//Definieren eines Legendenstyles LegendOptions legendOptions = new LegendOptions(); legendOptions.setTextStyle(textStyle); //Setzen eines TextStyles (siehe oben) legendOptions.setPosition(XdevChartOptions.POSITION_BOTTOM); //Auswahl der Position für die Legende. Auswahlmöglichkeiten: .POSITION_BOTTOM, .POSITION_TOP, .POSITION_RIGHT, .POSITION_LEFT legendOptions.setMaxLines(5); //Befindet sich die Legende Über dem Chart (POSITION_TOP) kann hier entschieden werden bis auf wie viele Zeilen umgebrochen werden darf legendOptions.setAlignment(XdevChartOptions.ALIGNMENT_CENTER); //Anordnung der legende an der jeweiligen Position. Auswahlmöglichkeiten: .START, .CENTER, .END //Zuweisen der Konfiguration für Beschriftungen Chart.setLegend(legendOptions);
Konfigurieren BackgroundStyle
Über das Objekt "BackgroundStyle" lassen sie die Legenden der einzelnen Chart beeinflussen und konfigurieren.
//Definieren eines BackgroundStyles final StrokeFill background = 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") oder //Definieren der Hintergrundfarbe final Color background = Background.Color("green"); //Zuweisen der Konfiguration für Beschriftungen chart.setBackgroundColor(background);
Konfigurieren Größe und Position
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 areaChart.setChartArea(area);
Beispiel:
//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 Chart.setBackgroundColor(style); Chart.setTitleTextStyle(textStyle); Chart.setLegend(legendOptions);