Zum Hauptinhalt springen

Google Charts

In ChatGPT öffnen
Shadow google-chart 23.06
Java API

Die GoogleChart-Komponente integriert die Google Charts-Bibliothek in webforJ und gibt Ihnen Zugriff auf Diagrammtypen wie Balken-, Linien-, Kreis-, Geo- und andere Diagramme. Diagramme werden mit Java unter Verwendung eines Typs, eines Datensatzes und einer Optionskarte konfiguriert, die das Erscheinungsbild und das Verhalten steuert.

Erstellung eines Diagramms​

Import von Google Charts

Um die GoogleChart-Klasse in Ihrer Anwendung zu verwenden, fügen Sie die folgende XML in Ihre POM-Datei ein:

<dependency>
    <groupId>com.webforj</groupId>
    <artifactId>webforj-googlecharts</artifactId>
    <version>${webforj.version}</version>
</dependency>

Um ein Diagramm zu erstellen, geben Sie einen Diagrammtyp an, konfigurieren Sie dessen visuelle Optionen und stellen Sie die anzuzeigenden Daten bereit.

Dieses Beispiel erstellt ein Geo-Diagramm, das Umsatzdaten über verschiedene Länder abbildet, mit benutzerdefinierten Farben, Legendensortierung und Größenanpassung des Diagrammgebiets:

Code anzeigen

Diagrammtypen​

Das GoogleChart-Addon bietet eine umfassende Auswahl an Diagrammtypen, die verschiedene Anforderungen an die Datenvisualisierung erfüllen. Die Auswahl des geeigneten Diagrammtyps ist entscheidend, um die Geschichte der Daten effektiv zu kommunizieren. Siehe die Galerie unten für Beispiele gängiger Diagramme, die in einer webforJ-Anwendung verwendet werden können.

Code anzeigen

Optionen​

Das GoogleChart-Addon ermöglicht umfangreiche Anpassungen durch eine Vielzahl von Optionen. Diese Optionen erlauben es Ihnen, das Aussehen und die Funktionalität Ihrer Diagramme an die Bedürfnisse Ihrer Anwendung anzupassen. Optionen werden als Map<String, Object> an die Methode setOptions() des Diagramms übergeben.

Hier ein Beispiel für das Festlegen der Optionen eines Diagramms:

Map<String, Object> options = new HashMap<>();
options.put("title", "Monatlicher Umsatz");
options.put("backgroundColor", "#EFEFEF");

// Wenden Sie die Optionen auf das Diagramm an
chart.setOptions(options);

Für weitere Informationen zu den verfügbaren Optionen für spezifische Diagramme siehe die Dokumentation der Google Visualisierung API (Diagrammgalerie).

Daten festlegen​

Die Visualisierung von Daten mit GoogleChart erfordert eine ordnungsgemäße Strukturierung und Festlegung der Daten. Dieser Leitfaden führt Sie durch die Vorbereitung Ihrer Daten und deren Anwendung auf Ihre Diagramme.

Grundlegende Datenkonfiguration​

Die einfachste Möglichkeit, die Daten zu definieren, besteht darin, List<Object> zu verwenden, wobei jede Zeile eine Liste von Werten ist.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Aufgabe", "Stunden pro Tag"));
data.add(Arrays.asList("Arbeiten", 11));
data.add(Arrays.asList("Essen", 2));
data.add(Arrays.asList("Pendeln", 2));
data.add(Arrays.asList("Fernsehen", 2));
data.add(Arrays.asList("Schlafen", 7));
chart.setData(data);

Verwendung von Maps für komplexere Strukturen​

Für komplexere Datenstrukturen können Sie Maps verwenden, um Zeilen darzustellen und sie dann in das erforderliche Format zu konvertieren.

List<Object> data = new ArrayList<>();

// Kopfzeile
data.add(Arrays.asList("Land", "Umsatz"));

// Datenzeilen
Map<String, Object> row1 = Map.of("Land", "Deutschland", "Umsatz", 1000);
Map<String, Object> row2 = Map.of("Land", "Vereinigte Staaten", "Umsatz", 1170);
Map<String, Object> row3 = Map.of("Land", "Brasilien", "Umsatz", 660);

data.add(new ArrayList<>(row1.values()));
data.add(new ArrayList<>(row2.values()));
data.add(new ArrayList<>(row3.values()));

chart.setData(data);

Sobald die Daten vorbereitet sind, können sie mit der Methode setData an GoogleChart angewendet werden.

Code anzeigen

Laden von Daten und Optionen aus JSON​

Sie können auch Daten und Optionen aus JSON-Dateien mit Gson zum einfacheren Management laden. Dieser Ansatz hilft, Ihre Daten und Optionen organisiert und leicht aktualisierbar zu halten.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Jahr", "Verkäufe", "Ausgaben"));
data.add(Arrays.asList("2013", 1000, 400));
data.add(Arrays.asList("2014", 1170, 460));
data.add(Arrays.asList("2015", 660, null)); 
data.add(Arrays.asList("2016", 1030, 540));
chart.setData(data);

Map<String, Object> options = new Gson().fromJson(
    Assets.contentOf("options.json"),
    new TypeToken<Map<String, Object>>() {}.getType()
);
chart.setOptions(options);

Aktualisierung des Diagramm-Designs​

Das Aktualisieren oder Erneuern des Erscheinungsbilds Ihrer Diagramme als Reaktion auf Datenänderungen, Benutzerinteraktionen oder Anpassungen der visuellen Optionen ist einfach mit der Methode redraw(). Diese Methode stellt sicher, dass Ihre Diagramme genau und visuell im Einklang mit den zugrunde liegenden Daten oder Änderungen an ihren Einstellungen bleiben.

Rufen Sie redraw() in Szenarien wie diesen auf:

  • Nach Datenänderungen: Stellt sicher, dass das Diagramm alle Aktualisierungen der Datenquelle widerspiegelt.
  • Beim Ändern von Optionen: Wendet neue Stile oder Konfigurationsänderungen auf das Diagramm an.
  • Für responsive Anpassungen: Passt das Layout oder die Größe des Diagramms an, wenn sich die Abmessungen des Containers ändern, um eine optimale Anzeige auf verschiedenen Geräten zu gewährleisten.
Code anzeigen

Exportieren von Diagrammen als Bilder​

Die Methode getImageUri() bietet eine Möglichkeit, Ihre Google Charts als base64-kodierte PNG-Bilder zu exportieren. Diese Methode ist besonders nützlich, um Diagramme außerhalb der Webumgebung zu teilen, sie in E-Mails oder Dokumenten einzubetten oder einfach für Archivierungszwecke.

Rufen Sie getImageUri() auf Ihrer Diagramminstanz auf, nachdem das Diagramm vollständig gerendert wurde. Typischerweise wird diese Methode innerhalb eines "bereit"-Ereignislisteners verwendet, um sicherzustellen, dass das Diagramm bereit zum Export ist:

chart.addReadyListener(e -> {
    String imageUri = chart.getImageUri();
    // Jetzt können Sie das imageUri verwenden, zum Beispiel als src-Attribut eines img-Tags
});

GoogleChartSelectedEvent​

Das GoogleChartSelectedEvent wird ausgelöst, wenn ein Benutzer einen Datenpunkt oder ein Segment in einer Google Chart-Komponente auswählt. Dieses Ereignis ermöglicht die Interaktion mit den ausgewählten Diagrammdaten und bietet Details darüber, was ausgewählt wurde. Das Ereignis kann durch die Verwendung der Methode addSelectedListener() auf der GoogleChart-Instanz abgehört werden.

Das GoogleChartSelectedEvent ist nützlich in Anwendungen, in denen die Benutzerinteraktion mit dem Diagramm notwendig ist.

GoogleChart chart = new GoogleChart(GoogleChart.Type.BAR);

// Fügen Sie den ausgewählten Listener zum Diagramm hinzu
chart.addSelectedListener(event -> {
    // Holen Sie die Auswahl ab
    List<Object> selection = chart.getSelection();
    
    // Behandeln Sie das ausgewählte Ereignis
    if (!selection.isEmpty()) {
        System.out.println("Ausgewählte Zeile: " + selection.get(0));
        // Weitere Verarbeitung basierend auf der Zeilen-/Spaltenauswahl
    }
});

Nutzlast​

Das GoogleChartSelectedEvent bietet Zugriff auf die Auswahldaten, die mit der Methode getSelection() auf dem Diagramm-Objekt abgerufen werden können. Diese Methode gibt eine Liste von Objekten zurück, wobei jedes Objekt die folgenden Eigenschaften enthält:

  • row: Der Index der Zeile in der Datentabelle des Diagramms, die ausgewählt wurde.
  • column: Der Index der Spalte in der Datentabelle, die optional ist und auf Diagramme angewendet wird, die die Auswahl einzelner Zellen ermöglichen, wie z. B. ein Tabellen-Diagramm.

Für Diagramme wie Kreis- oder Balkendiagramme wird normalerweise nur die row bereitgestellt, die den ausgewählten Datenpunkt angibt.

Hier ein Beispiel für die Nutzlast:

[
  {
    "row": 3,  // Der ausgewählte Zeilenindex in den Daten
    "column": 2  // (Optional) Der ausgewählte Spaltenindex
  }
]
Auswahl mehrerer Datenpunkte

Wenn der Benutzer mehrere Datenpunkte auswählt, gibt die Methode getSelection() ein Array von Objekten zurück, von denen jedes ein ausgewähltes Element darstellt. Die Nutzlast kann je nach Diagrammtyp und der Interaktion, die der Benutzer ausführt, variieren.