Passer au contenu principal

Google Charts

Ouvrir dans ChatGPT
Ombre google-chart 23.06
Java API

Le composant GoogleChart intègre la bibliothèque Google Charts dans webforJ, vous donnant accès à des types de graphiques comme barres, lignes, secteurs, géo, et plus encore. Les graphiques sont configurés avec Java en utilisant un type, un ensemble de données, et une carte d'options qui contrôle l'apparence et le comportement.

Création d'un graphique​

Importation des Google Charts

Pour utiliser la classe GoogleChart dans votre application, utilisez le XML suivant dans votre fichier POM :

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

Pour créer un graphique, spécifiez un type de graphique, configurez ses options visuelles, et fournissez les données à afficher.

Cet exemple crée un graphique géo qui cartographie les données de revenus à travers différents pays, avec des couleurs personnalisées, un positionnement de légende, et une taille de zone de graphique :

Afficher le code

Types de graphiques​

Le module GoogleChart offre une gamme complète de types de graphiques pour s'adapter à divers besoins de visualisation des données. La sélection du type de graphique approprié est essentielle pour communiquer efficacement l'histoire des données. Consultez la galerie ci-dessous pour des exemples de graphiques courants qui peuvent être utilisés dans une application webforJ.

Afficher le code

Options​

Le module GoogleChart permet une personnalisation étendue grâce à une variété d'options. Ces options vous permettent d'adapter l'apparence et les fonctionnalités de vos graphiques aux besoins de votre application. Les options sont passées en tant que Map<String, Object> à la méthode setOptions() du graphique.

Voici un exemple pour définir les options d'un graphique :

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

// Appliquer les options au graphique
chart.setOptions(options);

Pour plus d'informations sur les options disponibles pour des graphiques spécifiques, consultez la référence API de Google Visualization (Galerie de graphiques).

Définition des données​

Visualiser les données avec GoogleChart nécessite de structurer correctement et de définir les données. Ce guide vous montrera comment préparer vos données et les appliquer à vos graphiques.

Configuration des données de base​

La manière la plus simple de définir les données est d'utiliser List<Object>, où chaque ligne est une liste de valeurs.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Tâche", "Heures par jour"));
data.add(Arrays.asList("Travail", 11));
data.add(Arrays.asList("Manger", 2));
data.add(Arrays.asList("Trajet", 2));
data.add(Arrays.asList("Regarder la télé", 2));
data.add(Arrays.asList("Dormir", 7));
chart.setData(data);

Utilisation de cartes pour des structures plus complexes​

Pour des structures de données plus complexes, vous pouvez utiliser des cartes pour représenter des lignes, puis les convertir au format requis.

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

// Ligne d'en-tête
data.add(Arrays.asList("Pays", "Revenus"));

// Lignes de données
Map<String, Object> row1 = Map.of("Pays", "Allemagne", "Revenus", 1000);
Map<String, Object> row2 = Map.of("Pays", "États-Unis", "Revenus", 1170);
Map<String, Object> row3 = Map.of("Pays", "Brésil", "Revenus", 660);

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

chart.setData(data);

Une fois les données préparées, elles peuvent être appliquées au GoogleChart à l'aide de la méthode setData.

Afficher le code

Chargement des données et options depuis JSON​

Vous pouvez également charger des données et des options à partir de fichiers JSON en utilisant Gson pour une gestion plus facile. Cette approche aide à garder vos données et options organisées et faciles à mettre à jour.

List<Object> data = new ArrayList<>();
data.add(Arrays.asList("Année", "Ventes", "Dépenses"));
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);

Mise à jour des visuels du graphique​

Rafraîchir ou mettre à jour l'apparence de vos graphiques en réponse aux changements de données, aux interactions des utilisateurs, ou aux ajustements des options visuelles est simple avec la méthode redraw(). Cette méthode garantit que vos graphiques restent précis et visuellement alignés avec les données sous-jacentes ou toute modification de leurs paramètres.

Appelez redraw() dans des scénarios tels que :

  • Après des modifications de données : Assure que le graphique reflète toute mise à jour de sa source de données.
  • Lors du changement d'options : Applique de nouveaux styles ou changements de configuration au graphique.
  • Pour des ajustements réactifs : Ajuste la mise en page ou la taille du graphique lorsque les dimensions du conteneur changent, garantissant un affichage optimal sur tous les appareils.
Afficher le code

Exportation des graphiques en tant qu'images​

La méthode getImageUri() fournit un moyen d'exporter vos Google Charts en tant qu'images PNG encodées en base64. Cette méthode est particulièrement utile pour partager des graphiques en dehors de l'environnement web, les intégrer dans des e-mails ou des documents, ou simplement pour des fins d'archivage.

Appelez getImageUri() sur votre instance de graphique après que le graphique ait été entièrement rendu. En général, cette méthode est utilisée dans un écouteur d'événements "prêt" pour garantir que le graphique est prêt à être exporté :

chart.addReadyListener(e -> {
  String imageUri = chart.getImageUri();
  // Vous pouvez maintenant utiliser l'imageUri, par exemple, comme attribut src d'une balise img
});

GoogleChartSelectedEvent​

L'événement GoogleChartSelectedEvent est déclenché chaque fois qu'un utilisateur sélectionne un point de données ou un segment dans un composant Google Chart. Cet événement permet d'interagir avec les données de graphique sélectionnées, fournissant des détails sur ce qui a été sélectionné. L'événement peut être écouté en utilisant la méthode addSelectedListener() sur l'instance de GoogleChart.

L'événement GoogleChartSelectedEvent est utile dans les applications où l'interaction des utilisateurs avec le graphique est nécessaire.

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

// Ajouter l'écouteur sélectionné au graphique
chart.addSelectedListener(event -> {
  // Obtenir la sélection
  List<Object> selection = chart.getSelection();
  
  // Gérer l'événement sélectionné
  if (!selection.isEmpty()) {
    System.out.println("Ligne sélectionnée : " + selection.get(0));
    // Traitement supplémentaire basé sur la ligne/colonne de la sélection
  }
});

Charge utile​

L'événement GoogleChartSelectedEvent fournit un accès aux données de sélection, qui peuvent être récupérées en utilisant la méthode getSelection() sur l'objet graphique. Cette méthode retourne une liste d'objets, où chaque objet contient les propriétés suivantes :

  • row : L'index de la ligne dans le tableau de données du graphique qui a été sélectionnée.
  • column : L'index de la colonne dans le tableau de données, qui est optionnel et s'applique aux graphiques qui permettent la sélection de cellules individuelles, comme un graphique en tableau.

Pour des graphiques comme les graphiques à secteurs ou à barres, seule la row est généralement fournie, indiquant le point de données sélectionné.

Voici un exemple de charge utile :

[
  {
    "row": 3,  // L'index de la ligne sélectionnée dans les données
    "column": 2  // (Optionnel) L'index de la colonne sélectionnée
  }
]
Sélection de plusieurs points de données

Si l'utilisateur sélectionne plusieurs points de données, la méthode getSelection() retournera un tableau d'objets, chacun représentant un élément sélectionné. La charge utile peut varier en fonction du type de graphique et de l'interaction réalisée par l'utilisateur.