Exemple : Graphiques à barres
Dans cette section, nous discutons les graphiques à barres 2D et 3D (y compris les graphiques à barres groupées et superposées) contenus dans le fichier SPS YearlySales.sps. Le design SPS est basé sur le schéma XML YearlySales.xsd et il utilise YearlySales.xml (capture d’écran ci-dessous) comme son fichier de travail XML. Tous les trois fichiers sont situés dans le dossier (Mes) Documents, C:\Documents and Settings\<username>\My Documents\Altova\StyleVision2025\StyleVisionExamples/Tutorial/Charts.
<?xml version="1.0" encoding="UTF-8"?> <Data xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="YearlySales.xsd"> <ChartType>Pie Chart 2D</ChartType> <Region id="Americas"> <Year id="2005">30000</Year> <Year id="2006">90000</Year> <Year id="2007">120000</Year> <Year id="2008">180000</Year> <Year id="2009">140000</Year> <Year id="2010">100000</Year> </Region> <Region id="Europe"> <Year id="2005">50000</Year> <Year id="2006">60000</Year> <Year id="2007">80000</Year> <Year id="2008">100000</Year> <Year id="2009">95000</Year> <Year id="2010">80000</Year> </Region> <Region id="Asia"> <Year id="2005">10000</Year> <Year id="2006">25000</Year> <Year id="2007">70000</Year> <Year id="2008">110000</Year> <Year id="2009">125000</Year> <Year id="2010">150000</Year> </Region> </Data> |
Après avoir ouvert le fichier SPS dans StyleVision, basculez vers l’Aperçu Authentic, et, dans la zone de liste déroulante Type de graphique (capture d’écran ci-dessous), sélectionnez, l’un après l’autre, Barre Graphique 2D, Barre Graphique 3D, Barre Graphique 3D Groupé, et Graphique à barres superposées pour voir les quatre types de graphique.
Les trois premiers graphiques des pages des graphiques à barres 2D et 3D montrent les ventes annuelles des trois régions de vente. Chacun de ces graphiques à barres (voir la capture d’écran d’un camembert 3D ci-dessous) représente une seule région, et les secteurs du camembert représentent les ventes de la région par année pour les six années entre 2005 et 2010.

Pour visualiser les paramètres de graphique de ces graphiques, basculez vers le Mode Design, sélectionnez la branche appropriée (Graphique à barres 2D ou Graphique à barres 3D) dans la première condition du design, cliquez avec la touche de droite dans le graphique, et sélectionnez Éditer Paramètres du graphique. Le dialogue Configuration de graphique s’ouvre.
Notez les points suivants sur les graphiques des ventes annuelles régionales :
1.Les graphiques ont été insérées à l’intérieur de l’élément Region pour que le nœud contextuel est l’élément Region. Un graphique est créé pour cette raison pour chaque itération du moteur XSLT au-dessus de l’élément Region.
2.Le titre de chaque graphique contient la valeur de l’attribut Region/@id.. Cliquez sur le bouton Paramètres dynamiques XPath pour voir comment cela est fait.
3.Puisque seule une série est requise, nous pouvons laisser l’Axe Z ou l’Axe du Nom de Séries vide. Ceci résulte en une série no-name par défaut étant créée.
4.L’Axe X sélectionne les libellés à être utilisés pour les barres du graphique à barres, dans ce cas les années 2005 à 2010, qui sont obtenues avec l’expression XPath Year/@id (voir la capture d’écran ci-dessous).

5.L’Axe Y sélectionne les valeurs de chaque barre du graphique à barres. Le nombre de barres dans le graphique est égal au nombre d’items dans la séquence renvoyée par l’expression XPath pour l’expression pour l’Axe Y. Dans notre exemple, l'expression XPath retourne une séquence d'items qui sont les contenus de l’élément enfants Year de l’élément Region. L’échelle du nombre vertical de l’Axe Y est générée automatiquement sur la base des items sélectionnés pour l’Axe Y.
6.Le nombre de barres du graphique à barres est déterminé selon les Règles du sélecteur des données de graphique. Donc, si la sélection était faite dans la capture d’écran ci-dessous, alors une autre barre pour l’année 2011 ayant une valeur de 60000 serait ajoutée au graphique.

7.Les items de la séquence sélectionnée pour l’Axe X seront assignés, par ordre correspondant, comme libellé pour chaque barre du graphique à barres.
8.Le nombre de l’Axe X et de l’Axe Y dans chaque ligne de sélection de données du volet du Sélecteur des données graphiques (voir la capture d’écran ci-dessus), bien qu’il ne soit pas une erreur s’il n’est pas le même. S’il y a moins d’éléments de l’Axe X que de l’Axe Y, alors les barres (qui n’ont pas d’item de l’Axe X correspondant) seront sans libellé. S’il existe plus d’items de l'Axe X que d’items de l'Axe Y, alors les items supplémentaires de l’Axe X seront ignorés pour la génération de libellé.
Utiliser les Séries Axis pour générer les barres groupées et les barres superposées
Si nous avons les années sur l’Axe X, il serait utile de grouper les barres des régions pour toute une année ensemble, comme dans la capture d’écran ci-dessous. De tels graphiques groupés sont présents dans le fichier d’exemple : le dernier graphique, respectivement, dans les pages Graphique à barres 2D (capture d’écran ci-dessous) et Graphique à barres 3D. Un des graphiques à la page Graphique à barres 3D Grouped est également un graphique groupé. Les graphiques à barres superposées utilisent les mêmes principes de sélection des données comme graphiques à barres groupées, mais ils sont différents dans l’apparence. Ils sont discutés un peu plus bas.

Le groupement de barres dans ces graphiques est atteint avec l’Axe Z ou les Axes de nom de Séries. Pour le « Series Name Axis », nous sélectionnons les noms de ces trois régions. À cette fin, nous créons un graphique, pas au sein d’un élément Region , mais à un niveau plus élevé (au sein d’un élément Data ; se réfère à un document XML ci-dessus), pour que nous puissions cibler maintenant facilement tous les trois éléments de la Region. Nos expressions XPath pour les trois axes seraient comme dans la capture d’écran ci-dessous.

Notez les points suivants en ce qui concerne ces graphiques qui groupent tous les régions par année :
•Le nœud contextuel du graphique est à un niveau plus élevé que l’élément Region : Il s’agit de l’élément Data.
•Pour l’Axe Z (Series Name Axis), nous sélectionnons le nom de la région (Region/@id).
•Et les graphiques à barres affichant des ventes régionales annuelles, l’Axe X sélectionne les noms des années (Region/Year/@id) et l’Axe Y sélectionne les ventes pour chaque année (contenu de l’élément Region/Year).
La sélection de données ci-dessus fait ceci : Pour chaque élément de Region, elle sélectionne un nom de séries (la valeur de l’attribut id de l’élément Region), puis génère l’Axe X pour la Region (utilisant la séquence obtenue avec les valeurs de des attributs Year/@id). Elle génère ensuite les valeurs de l’Axe Y (utilisant la séquence obtenue avec le contenu des éléments Year). Ceci est fait pour tous les trois éléments Region, en séquence, générant le graphique affiché ci-dessus.
Pour plus d’information sur la sélection des données pour des axes variés, voir la section Règles pour la Sélection des données graphiques.
Le même effet est obtenu avec la sélection des données affichée dans la capture d’écran ci-dessous. Dans cette sélection de données, chaque région et ses axes sont sélectionnés individuellement, avec une région suivant une autre. Notez que étant donné que les items de l’Axe X des deuxième et troisième séries seront ignorés, il est prudent de laisser ces champs vides dans la boîte de dialogue.

Une autre manière de sélectionner les mêmes données serait de le faire avec les expressions XPath dans la capture d’écran ci-dessous.

Notez que l’expression de l’Axe X dans les trois lignes de la sélection des données est identique. Ce qui est requis est que la sélection des données XPath renvoie la séquence correcte d’items. La séquence peut aussi être saisie directement dans l’expression XPath. Par exemple : « 2005, 2006, 2007, 2008, 2009, 2010 ». Une chose semblable a été faite pour l’Axe Series.
Graphiques à barres superposées
Les graphiques à barres superposées, tels le graphique à barres superposées à la page Graphique à barres superposées du fichier d’exemple, YearlySales.xml (capture d’écran ci-dessous), utilisent les mêmes principes de sélection des données que ceux des graphiques groupés. Tous les trois axes sont sélectionnés exactement comme ils sont sélectionnés pour les graphiques groupés décrits ci-dessus. Toutefois, à la place des barres d’un groupe étant situé côte-à-côte, ils sont superposés, pour que pour chaque coche de l’Axe X, chaque membre des séries à la coche de l’Axe X est représenté par une barre unique superposée (capture d’écran ci-dessous).

Les graphiques à barres superposées fournissent un bon aperçu d’une rupture d’un composite. Par exemple, dans la capture d’écran ci-dessus, chaque barre est un composite qui représente les ventes totales en une année spécifique et elle est composée des ventes annuelles de chacune des régions.