PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Mise en place
  • Animer un champ Graphe
  • Modifier ou supprimer l'animation par programmation
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation
L'animation du champ Graphe permet de proposer un affichage dynamique dans vos applications.
Par exemple, au premier affichage d'un graphe de type Histogramme, chaque barre semble jaillir de l'axe des abscisses. L'animation est également effectuée lorsqu'une valeur est modifiée.
L'animation du champ Graphe est définie sous l'éditeur dans l'onglet "Détail" de la fenêtre de description du champ.
Versions 20 et supérieures
Android Cette fonctionnalité est désormais disponible pour les applications android.
WEBDEV - Code ServeurWindowsLinux Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
Nouveauté 20
Android Cette fonctionnalité est désormais disponible pour les applications android.
WEBDEV - Code ServeurWindowsLinux Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
Android Cette fonctionnalité est désormais disponible pour les applications android.
WEBDEV - Code ServeurWindowsLinux Cette fonctionnalité est désormais disponible pour les sites WEBDEV.
Versions 23 et supérieures
PHP Cette fonctionnalité est désormais disponible pour les sites PHP.
Nouveauté 23
PHP Cette fonctionnalité est désormais disponible pour les sites PHP.
PHP Cette fonctionnalité est désormais disponible pour les sites PHP.
Mise en place

Animer un champ Graphe

Pour animer un champ Graphe :
  1. Affichez la fenêtre de description du champ Graphe.
  2. Dans l'onglet "Détail" :
    • WINDEV Dans la zone "Animations des graphes 2D", cochez l'option "Activer les animations".
    • iPhone/iPad Dans la zone "Animations", cochez l'option "Activer les animations". AndroidiPhone/iPad Dans la zone "Animations", cochez l'option "Activer les animations".
    • Versions 20 et supérieures
      WEBDEV - Code Serveur Dans la zone "Interactivité", cochez l'option "Graphe interactif" si nécessaire puis l'option "Activer les animations".
      Remarque : L'option "Graphe interactif" permet d'obtenir des graphes réagissant aux actions de l'internaute. Par exemple, dans un graphe de type Secteur, la part survolée est automatiquement excentrée, la part cliquée est positionnée en bas du graphe, la valeur sélectionnée dans la légende est rendue invisible, ...
      PHP Seuls les graphes interactifs sont disponibles.
      Nouveauté 20
      WEBDEV - Code Serveur Dans la zone "Interactivité", cochez l'option "Graphe interactif" si nécessaire puis l'option "Activer les animations".
      Remarque : L'option "Graphe interactif" permet d'obtenir des graphes réagissant aux actions de l'internaute. Par exemple, dans un graphe de type Secteur, la part survolée est automatiquement excentrée, la part cliquée est positionnée en bas du graphe, la valeur sélectionnée dans la légende est rendue invisible, ...
      PHP Seuls les graphes interactifs sont disponibles.
      WEBDEV - Code Serveur Dans la zone "Interactivité", cochez l'option "Graphe interactif" si nécessaire puis l'option "Activer les animations".
      Remarque : L'option "Graphe interactif" permet d'obtenir des graphes réagissant aux actions de l'internaute. Par exemple, dans un graphe de type Secteur, la part survolée est automatiquement excentrée, la part cliquée est positionnée en bas du graphe, la valeur sélectionnée dans la légende est rendue invisible, ...
      PHP Seuls les graphes interactifs sont disponibles.
  3. Validez la fenêtre de description du champ.
Remarques :
  • Cette option est disponible pour les types de graphes suivants :
    • WINDEV Aire, Bulle, Courbe, Donut, Histogramme, MinMax, Radar, Secteur, Waterfall.
    • AndroidiPhone/iPad Aire, Bulle, Courbe, Donut, Histogramme, Secteur.
    • WEBDEV - Code ServeurPHP Aire, Courbe, Histogramme, Histogramme empilé, Secteur, Donut, Hémicycle.
  • L'animation effectuée sur les champs Graphe dépend du type de graphe affiché. Cette animation ne peut pas être paramétrée.
  • Par défaut, l'animation d'un champ Graphe dure 30 millisecondes.
  • Si un champ Graphe est animé, l'animation sera également effectuée lors du dessin du graphe en cas de changement d'une valeur (fonction grDessine).
  • Android La fonction grDessine n'est pas bloquante. Si le graphe est dessiné avec une animation, la fonction rendra la main dès le début de l'animation. Ainsi, si plusieurs graphes sont affichés dans la même fenêtre, il est possible d'animer ces champs simultanément.
  • WINDEViPhone/iPad Par défaut, les champs Graphe créés à partir de la version 19 sont animés.

Modifier ou supprimer l'animation par programmation

La propriété ..DuréeAnimation permet de :
  • Connaître et modifier la durée de l'animation effectuée dans un champ Graphe.
    // Augmentation du délai
    GRF_MonGraphe..DuréeAnimation = 2000
  • Annuler l'animation d'un champ Graphe. Il suffit pour cela de changer la durée de l'animation en lui donnant une valeur nulle.
    // Arrête l'animation temporairement
    GRF_MonGraphe..DuréeAnimation = 0
Liste des exemples associés :
WD Graphe Exemples didactiques (WINDEV) : WD Graphe
[ + ] Cet exemple didactique présente diverses utilisations du champ graphe.
Les graphes présentés sont :
- Hémicycle
- Beignet (ou donut)
- Secteur (ou camembert)
- Secteur multiniveau (ou sunburst)
- Courbe
- Nuage de points
- Nuage de points 3D
- Histogramme
- Aire
- Bulles
- Radar
- Entonnoir
- Surface
- Waterfall
- Composite

Les fonctionnalités mises en avant sont la personnalisation des graphes par programmation ainsi que le remplissage du graphe à partir d'un fichier de données HFSQL ou dans l'éditeur.
Les fonctions Graphe Exemples unitaires (WINDEV) : Les fonctions Graphe
[ + ] Utilisation des principales fonctionnalités du grapheur de WINDEV :
- Réaliser un graphique de type Secteur, Histogramme ou Courbe
- Définir la zone d'affichage d'un graphique
- Définir les options du graphique (légende, pourcentage,...)
- Réaliser un tracé de courbe sur un graphe
Version minimum requise
  • Version 19
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire