Inhalt:
- Daten- / Objektstruktur
- Füllen von Daten
- Chartkonfiguration
Optimale Datenstruktur (Datenbank):
Beschriftung | X-Axis | Y-Axis | Kategorie | BubbleGröße |
---|---|---|---|---|
"DEU" | 68.49 | 2.96 | "Europe" | 61801570 |
"GBR" | 79.66 | 1.67 | "Europe" | 81902307 |
"ISR" | 78.09 | 2.78 | "Middle East" | 31090763 |
... |
Optimale Objektstruktur (Java)
public class BubbleChartObject { private String description; private Double x_value; private Double y_value; private String category; private Double bubbleValue; public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public Double getX_value() { return x_value; } public void setX_value(Double x_value) { this.x_value = x_value; } public Double getY_value() { return y_value; } public void setY_value(Double y_value) { this.y_value = y_value; } public String getCategory() { return category; } public void setCategory(String category) { this.category = category; } public Double getBubbleValue() { return bubbleValue; } public void setBubbleValue(Double bubbleValue) { this.bubbleValue = bubbleValue; } }
Beispiel: Füllen der Daten
XdevBubbleChartModel model = new XdevBubbleChartModel("Life", "Rate", "Country", "People"); model.addItem("CAN", 80.66, 1.67, "North America", 33739900d); model.addItem("GBR", 79.84, 1.36, "Europe", 81902307d); model.addItem("USA", 72.73, 1.84, "North America", 5523095d); model.addItem("IRN", 80.05, 4.77, "Middle East", 79716203d); model.addItem("DEU", 68.09, 2.96, "Europe", 61801570d); model.addItem("RUS", 81.55, 2.05, "Europe", 73137148d); model.addItem("ISR", 78.09, 2.78, "Middle East", 31090763d);
API und Methoden:
Füllen der Daten
model.addItem(String value, String value2, Integer value3)
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
Positionierung und Größe des Chart innerhalb des Chartbereichs
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);
Konfiguration der Bubbles
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);
Konfiguration Farben
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
Konfiguration Texte
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
Konfiguration des Tooltips und wann er angezeigt werden soll
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);