Inhalt:
- Daten- / Objektstruktur
- Füllen von Daten
- Chartkonfiguration
- Konfiguration Chartgröße
- Konfiguration der Bubbles
- Konfiguration Farben
- Konfiguration Texte Konfiguration TooltipsProperties
| Anchor | ||||
|---|---|---|---|---|
|
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
XdevBubbleChartModelfinal ChartModel model = new XdevBubbleChartModel("Life ChartModel.New()..addColumn(Column.New(Type.STRING, "bubbletext", "Bubbletext")) .addColumn(Column.New(Type.NUMBER, "x-value", "X-Axis")) .addColumn(Column.New(Type.NUMBER, "x-value", "Y-Axis")) .addColumn(Column.New(Type.STRING, "category", "Rate"Category")) .addColumn(Column.New(Type.NUMBER, "Countrybubblesize", "PeopleBubblesize")); model.addItemaddRow("CAN", 80.66, 1.67, "North America", 33739900d); model.addItemaddRow("GBR", 79.84, 1.36, "Europe", 81902307d); model.addItemaddRow("USA", 72.73, 1.84, "North America", 5523095d); model.addItemaddRow("IRN", 80.05, 4.77, "Middle East", 79716203d); model.addItemaddRow("DEU", 68.09, 2.96, "Europe", 61801570d); model.addItemaddRow("RUS", 81.55, 2.05, "Europe", 73137148d); model.addItemaddRow("ISR", 78.09, 2.78, "Middle East", 31090763d); |
API und Methoden:
Füllen der Daten
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
model.addItem("CAN", 80.66, 1.67, "North America", 33739900d); //Parameter 1 ("CAN"): Beschreibung / Beschriftung der Bubbles //Parameter 2 (80.66): Wert auf der X-Achse //Parameter 3 (1.67): Wert auf der Y-Achse //Parameter 4 ("North America"): Kategorie oder Gruppierung //Parameter 5 (33739900d): Größe der Bubble |
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
XdevBubbleChartConfig config = new XdevBubbleChartConfig();
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 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Bubble bubble = new Bubble();
bubble.setOpacity(0.5); //Setzen transparenz der Bubbles. Werte von 0 bis 1
bubble.setStroke("Black"); //Setzen Rahmenfarbe der Bubbles wahlweise in Kurzschreibweise ("Red") oder Farbcodes ("#FFFFFF")
bubble.setTextStyle(...); //Siehe API Allgemein "TextStyle"
config.setBubble(bubble); |
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
XdevBubbleChartConfig config = new XdevBubbleChartConfig();
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 | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
XdevBubbleChartConfig config = new XdevBubbleChartConfig();
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, "selektion" --> MouseKlick config.setTooltip(tooltip);this.bubbleChart.setModel(model); |