Graphiques

Aperçu

Chef de projet : Pierre Dubois (@duboisp)

Description

Version 2.2 et versions antérieures de la BOEW. Au départ, le composant Graphiques était une intégration du projet de visualisation du groupe Filament(anglais seulement).

Version 2.3 de la BOEW. Le composant Graphiques a été entièrement réécrit. Cette version comprenait la première version de l’analyseur de tableaux complexes intégré directement dans les graphiques. Le système principal de dessin « Canvas » a été remplacé par « SVG/VML » dans la bibliothèque RaphaelJS. Il est maintenant possible de personnaliser le graphique directement en fonction de la catégorie CSS attribuée au balisage du graphique.

Version 3.0 de la BOEW. Presque identique à la version précédente. L’analyseur de tableaux a été réécrit et partiellement retranché du composant Graphiques. Cette version comprend une version hybride des analyseurs de tableaux précédent et actuel. Cette décision a été prise pour des raisons techniques et de délais. Malheureusement, cette version n’intègre pas pleinement l’analyseur de tableaux actuel, et l’analyseur ne traite que partiellement les tableaux complexes définis par douze nouvelles techniques HTML. Cette version comprend plus de catégories d’options de CSS pour la personnalisation des graphiques.

(Needs translation) WET v3.1 release (Current). The previous drawing backend supported with RaphaelJS library was removed in favour of Flot project. The goal was to provide the full advantage of the current table parser with the chart customization provided in the WET 3.0 release.

Objet

Ce composant génère de façon dynamique des graphiques à partir de données tabulaires. Les données utilisées pour générer le graphique doivent avoir une structure définie dans les techniques d’élaboration de tableaux. Le graphique généré peut être facilement personnalisé en fonction de l’option CSS choisie pour les différents éléments des tableaux.

  • Il est plus facile à mettre à jour et à maintenir que les composants qui servent à créer des graphiques et des diagrammes à images.
  • Il permet de créer des graphiques linéaires simples, des graphiques à deux dimensions, des diagrammes en barres, des graphiques à échelles multiples superposées, des diagrammes à secteurs et tout agencement de graphiques linéaires simples, de graphiques à deux dimensions, de diagrammes en barres et de graphiques à échelles multiples superposées.
  • L’apparence visuelle peut être personnalisée au moyen de CSS appliquées au conteneur du graphique (élément image), et la catégorie d’options CSS permet de personnaliser le graphique en tant que tel.
  • Méthode de l’amélioration progressive
  • Conformité aux WCAG 2.0 AA
  • Spécification WAI-ARIA pour accroître l’accessibilité.
  • Compatibilité avec Firefox, Opera, Safari, Chrome et IE 8+.

Raison d'être

Conformément à la Règle 1.1 des WCAG(anglais seulement), tout graphique doit avoir son équivalent de données tabulaires. Le composant Graphiques utilise la version équivalente (dans le cas présent l’élément tableau) pour générer le graphique. Les données du tableau fournissent une longue description au graphique. La légende du tableau et sa description donnent son titre et sa description au graphique.

Si vous n’utilisez pas le composant Graphiques pour créer votre tableau, n’oubliez pas d’ajouter une longue description. Règle 1.1 des WCAG : « Proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d'autres formes selon les besoins de l'utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié. ».

Techniques pour créer des tableaux

Le composant Graphiques permet l’utilisation des techniques suivantes.

Vous devez utiliser les éléments de regroupement des tableaux thead et tbody. Seul le premier groupe de lignes de données peut être représenté dans un graphique.

Mise en œuvre

  1. Validez votre tableau HTML à l’aide du Validateur de tableaux HTML issu du projet des Outils optimaux de contenu. À titre informatif, vos identificateurs/en-têtes seront automatiquement corrigés par le valideur de tableau.
  2. Ajoutez la catégorie « wet-boew-charts » dans l’élément « table ».
  3. Personnalisez vos graphiques avec la catégorie d’options CSS (dont il est question ci-après).

Nota : Consultez les sections Techniques pour créer des tableaux et Problèmes connus.

Exemples pratiques

Paramètres

Les options contenues dans l’élément Graphiques doivent avoir un préfixe d’espace de nommage. Il est possible d’écraser les valeurs contenues dans l’espace de nommage et les options par défaut en éditant le fichier des paramètres JavaScript.

Espaces de nommage requis

wb-charts L’espace de nommage requis doit être inclus par défaut dans tous les paramètres et toutes les options définis ici.

Élément <table>

  • type par défaut : Énumération (« line », « area », « bar », « stacked », « pie »). Définit le type de tableau par défaut. PVI « wb-charts-line » et « wb-charts-type-line » sont des équivalents.
  • width : Nombre. Définit la largeur du graphique en pixels, p. ex., « wb-charts-width-300 », « wb-charts-width-255 ».
  • height : Nombre. Définit la hauteur du graphique en pixels, p. ex., « wb-charts-height-500 », « wb-charts-height-715 ».
  • graphclass : Chaîne. Permet d’attribuer une classe personnalisée à l’élément qui contient l’image générée par la création du graphique. Vous pouvez ainsi donner le style de votre choix au conteneur du graphique et à la légende. P. ex., Ajoutez la classe « bold » à un graphique après sa génération « wb-charts-graphclass-bold ». Lorsque le graphique sera généré, la classe « bold » sera ajoutée à l’élément de l’image (<figure class="wb-charts bold">) . Cette fonctionnalité peut être utile lorsque vous voulez donner un style particulier à la liste « ul » de la légende, comme un affichage en deux colonnes ou le masquage complet de la légende.
  • topvalue : (nouveau) Nombre. Fixe la valeur maximale de l’axe des y du graphique. P. ex., « wb-charts-topvalue-4000000 », « wb-charts-topvalue-10 »
  • topvaluenegative : (nouveau) Paramètre booléen. Exprime à la forme négative l’ensemble des valeurs associées à « topvalue ».
  • bottomvalue : (nouveau) Nombre. Fixe la valeur minimale de l’axe des y du graphique. P. ex., « wb-charts-bottomvalue-0 », « wb-charts-bottomvalue-50 ».
  • bottomvaluenegative : nouveau Paramètre booléen. Exprime à la forme négative l’ensemble des valeurs associées à « bottomvalue ».
  • nocutaxis : (nouveau) Paramètre booléen. Désactive la coupure automatique de l’axe. P. ex., « wb-charts-nocutaxis-true »
  • steps : (nouveau) Nombre. Oblige à appliquer la valeur associée à steps pour dessiner le graphique. P. ex., « wb-charts-steps-5500 »
  • parseDirection : (nouveau) Énumération (« y », « x »). Définit l’orientation de l’affichage des données dans le tableau. La valeur par défaut est « x »
  • noencapsulation : (nouveau) Paramètre booléen. Empêche le déplacement du tableau html de la source des données vers un récapitulatif ou une description détaillée située sous les graphiques. P. ex., « wb-charts-noencapsulation-true »
  • maxwidth : (nouveau) Nombre. Fixe la largeur maximale des graphiques (en pixels).
  • labelposition (v3.1 seulement) : Nombre. (Needs translation) Specify wich row or column that would be use to label the charts.
  • uniformtick (v3.1 seulement) : Paramètre booléen. (Needs translation) 'True' by default. Determine how the colspan/rowspan could have an effect on the position of the label in the chart.
  • ticks (v3.1 seulement) : Nombre. (Needs translation) Number of label for the y-axis. Used with "topvalue" and "bottomvalue" could simulate the unsupported "steps" parameter. p. ex., "wb-charts-ticks-10".

Ne s’applique qu’aux diagrammes à secteurs

  • decimal : (nouveau) Nombre. Établit la précision décimale. Par exemple, un secteur d’un diagramme à secteurs qui représente moins de 0.5 % ne peut pas s’afficher clairement. P. ex., « wb-charts-decimal-1 », « wb-charts-decimal-2 »

Éléments supprimés :

  • hide : Paramètre booléen. A été remplacé par un mécanisme intégré qui utilise un élément de récapitulatif ou de détails pour donner accès aux données tabulaires.
  • nocutaxis
  • steps
  • maxwidth
  • decimal
    • ======= >>>>>>> v3.0

Truc technique

  • execdelay : (nouveau) Nombre. Détermine le temps d’attente (en millisecondes) avant la création du graphique suivant et des prochains. La valeur par défaut est de 200 millisecondes.

Élément <tbody>

Nota : Seul le premier tbody est utilisé pour créer le graphique, tous les autres groupes de données sont actuellement ignorés, tout simplement.

  • type par défaut : Énumeration (« line », « area », « bar », « stacked », « pie »). Définit le type de tableau par défaut. PVI « wb-charts-line » et « wb-charts-type-line » sont des équivalents. Les valeurs par défaut écraseront toutes les valeurs spécifiques entrées pour le tableau.

Élément <td>

Nota : Uniquement disponible pour le diagramme à secteurs.

  • color : Chaîne. Permet de choisir une couleur html personnalisée pour le secteur du diagramme correspondant. « wb-charts-color-[n’importe quelle couleur HTML] » P. ex., « wb-charts-color-blue », « wb-charts-color-yellow ».
  • overcolor : Chaîne. Permet de personnaliser la couleur html du pointage de la souris lorsqu’on veut pointer un secteur du diagramme en particulier. « wb-charts-overcolor-[n’importe quelle couleur HTML] » P. ex., « wb-charts-overcolor-red », « wb-charts-overcolor-orangered »

Pour en voir un exemple concret, veuillez regarder le diagramme à secteurs présenté dans l’exemple pratique sur les graphiques complexes.

Élément <th> (défini dans le groupe de cellules d’en-tête thead)

Nota : Uniquement disponible pour le graphique linéaire simple, le graphique à deux dimensions, le diagramme en barres et le graphique à échelles multiples superposées.

  • fill : Chaîne. Permet de personnaliser la couleur html de l’arrière-plan des cellules d’en-tête lorsqu’elles sont ajoutées au graphique. « wb-charts-fill-[n’importe quelle couleur HTML] » P. ex., « wb-charts-fill-red », « wb-charts-fill-orangered »
  • fillover : Chaîne. Permet de personnaliser la couleur html de l’effet de survol des cellules d’en-tête lorsqu’elles sont ajoutées au graphique. « wb-charts-fillover-[n’importe quelle couleur HTML] » P. ex., « wb-charts-fillover-blue », « wb-charts-fillover-yellow ».

Élément <th> (défini dans le premier groupe de lignes de données, tbody)

Nota : Ce type n’est disponible que pour les diagrammes à secteurs, toutes les autres options se rapportent aux graphiques linéaires simples, aux graphiques à deux dimensions, aux diagrammes en barres et aux graphiques à échelles multiples superposées.

  • type par défaut : Énumération (« line », « area », « bar », « stacked », « pie »). Définit le type de diagramme par défaut. PVI « wb-charts-line » et « wb-charts-type-line » sont équivalents. Écrasera toute valeur saisie pour le groupe de lignes (tbody) et l’élément parent du tableau.
  • color : Chaîne. Permet de personnaliser la couleur html des barres, des échelles, des dimensions ou des lignes. « wb-charts-color-[n’importe quelle couleur HTML] » P. ex., « wb-charts-color-blue », « wb-charts-color-yellow »
  • fillopacity : Nombre (entre 0 et 100). Permet de déterminer le degré d’opacité d’un objet barre, échelle ou dimension. « wb-charts-fillopacity-[n’importe quel nombre entre 0 et 100] » P. ex.. « wb-charts-fillopacity-20 », « wb-charts-fillopacity-50 »
  • dasharray : Valeur de la chaîne. Permet de préciser le type de trait. P. ex., « wb-charts-dasharray-dashspacedot ». Voir la section sur les « dasharray » pour obtenir des exemples.

Exemples de « dasharray »

  • wb-charts-dasharray-none tracer une ligne continue, c’est la commande par défaut.
  • wb-charts-dasharray-dash tracer : ------------
  • wb-charts-dasharray-dashdot tracer : -.-.-.-.-.-.
  • wb-charts-dasharray-dot tracer : ............
  • wb-charts-dasharray-dotspace tracer : . . . . . . . . . . . .
  • wb-charts-dasharray-dashspace tracer : - - - - - - - - - - - -
  • wb-charts-dasharray-dashspacedot tracer : - . - . - . - . - . - . - . - . - . - . - . - .

Exemple pratique d’utilisation du paramètre

Développement

Il est possible d’écraser les valeurs de tous les paramètres par défaut susmentionnés en utilisant le mécanisme de réglage des paramètres de la BOEW. Il faut utiliser la variable « wet_boew_charts ». Cependant, il est impossible de modifier par écrasé la valeur de la couleur par défaut.

Problèmes connus

  • Il faut utiliser les balises de regroupement de cellules (thead, tbody).
  • Seul le premier groupe de lignes de données (tbody) peut être représenté dans un graphique.
  • Il n’est pas possible d’utiliser la technique du récapitulatif des groupes de colonnes.
  • Les éléments cellule principale et description de cellule ne fonctionnent pas.

Historique des versions

  • 2013-04-11 BOEW 3.1 : Version actuelle.
  • 2012-09-17 BOEW 3.0
  • 2012-03-14 2.01 : Le calcul du pourcentage pour le diagramme à secteurs a été corrigé, car il arrive qu’il ne soit pas égal à 100 %.
  • 2012-02-06 2.0 : Réécriture complète pour intégrer les tableaux et les graphiques complexes.
  • 2011-08-08 1.01 : Mise à niveau - Intégration des dernières versions de la structure des balises de base HTML5, du thème de la NSI 2.0 et du thème de base.
  • 2011-02-07 1.0 : déploiement initial.

Références

Techniques pour créer des tableaux HTML

Rayage du zèbre

Tableau de données complexes

Études de cas