Mashup Builder > Widgets > Widgets standard > Widget Graphique combiné (thématisable)
Widget Graphique combiné (thématisable)
Vue d'ensemble
Le widget Graphique combiné vous permet de représenter des séries de données sur le graphique à l'aide de plusieurs types de marqueurs, tels que des colonnes, des lignes, une zone et des points. Vous pouvez superposer plusieurs jeux de données à l'aide de différents types de visualisation pour comparer les quantités d'unités dans plusieurs séries de données. L'axe Y représente la grandeur et l'axe X la catégorie. L'affichage des données à l'aide de différents types de visualisation de graphique facilite la lecture des différentes échelles des axes Y.
Voici quelques-unes des configurations principales disponibles pour le graphique combiné :
• Visualiser les séries de données à l'aide de courbes, de colonnes, d'aires et de points.
• Lier les données de plusieurs sources.
• Configurer l'ordre d'empilage ZIndex de la série de données.
• Appliquer un formatage d'état pour styliser le graphique en fonction des valeurs.
• Grouper et empiler des séries de données.
Bonnes pratiques
• Conservez l'échantillonnage des données activé pour améliorer les performances du graphique au moment de l'exécution. La désactivation de l'échantillonnage des données peut ralentir les performances lorsque le graphique affiche des milliers de points de données de plusieurs séries. Vous ne devez désactiver l'échantillonnage que lorsque le jeu de données du graphique est petit.
Format des données
Vous devez créer une table d'informations avec des définitions de champ qui représentent la structure de données du graphique. La table d'informations doit inclure une définition de champ pour les valeurs des axes X et Y. Vous pouvez ajouter plusieurs séries de données en ajoutant des colonnes supplémentaires avec des définitions de champ pour les valeurs des séries de données. Chaque ligne de la table d'informations représente une catégorie sur l'axe X et ses valeurs correspondantes sur l'axe Y. La table ci-après décrit le format de données de la table d'informations :
Axe X
Valeur de l'axe Y
Valeur N de l'axe Y
Définition de champ
x:{name: 'x', baseType: 'STRING'}
value1: {name: 'value1', baseType: 'NUMBER'}
value2:{name:'value2',baseType:'NUMBER'}
Utilisation
Définit les valeurs de l'axe X. Les données doivent avoir un type de base STRING, NUMBER ou DATETIME. Chaque ligne est affichée en tant que catégorie sur l'axe X. Le nom défini pour cette colonne est l'option que vous devez sélectionner pour la propriété de widget XAaxisField.
Définit la valeur de l'axe Y et l'étiquette de légende de la catégorie.
Définit la valeur de l'axe Y et l'étiquette de légende pour chaque série de données supplémentaire.
Type de base
STRING, NUMBER ou DATETIME
* 
Lorsque les données du graphique sont affichées sous forme de barres, les étiquettes de l'axe X sont automatiquement converties en chaînes. Vous pouvez formater les étiquettes à l'aide des propriétés XAxisFormatou XAxisDateFormatToken. Les propriétés utilisées pour définir le nombre minimum et maximum sur l'axe sont ignorées et les étiquettes sont triées en fonction de leur ordre dans la source de table d'informations.
NUMBER
NUMBER
Exemple de ligne
x: 'Apple' : où Apple correspond au nom de la catégorie à afficher sur l'axe X.
value1: 10 : valeur de l'axe Y de la catégorie.
value2: 30 : valeur de l'axe Y pour la série de données N.
L'image suivante illustre un exemple de données renvoyées d'une table d'informations à quatre définitions de champ pour l'axe Y :
Propriétés du widget
Les propriétés du widget Graphique combiné sont répertoriées ci-dessous.
Nom de propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Localisable ? (O/N)
AlignBarsAtZero
Aligne les barres de tous les axes Y du graphique sur zéro.
BOOLEAN
Faux
O
N
AxisDisplayControl
Ajoute un menu de configuration à la barre d'outils du graphique pour vous permettre de contrôler la visibilité des axes Y au moment de l'exécution.
BOOLEAN
Faux
O
N
ChartType
Définit le type de visualisation par défaut utilisé pour afficher les données de la série dans le graphique. Vous pouvez remplacer manuellement cette sélection pour chaque série de données à l'aide de la propriété SeriesNType.
STRING
Line
N
N
CustomClass
Spécifie la classe CSS personnalisée à appliquer à ce widget. Vous pouvez entrer plusieurs classes séparées par un espace.
STRING
N/A
O
N
Data
Source de données table d'informations du graphique.
Infotable
N/A
O
N
DataFieldN
Spécifie le champ de table d'informations à utiliser pour la série de données N.
Infotable
N/A
N
N
DataLabelN
Etiquette à afficher dans la zone de légende des séries de données N.
STRING
N/A
O
O
DataPointSelection
Spécifie le point de données à sélectionner par rapport à la position du pointeur. Vous pouvez définir la propriété de façon à sélectionner le point de données le plus proche sur l'axe vertical, l'axe horizontal ou les deux axes. Options :
• Aucune
• Position du pointeur
• Horizontal le plus proche
• Vertical le plus proche
• Les deux axes
STRING
N/A
O
N
DataSeriesStyleN
Permet d'appliquer un formatage d'état aux séries de données N dans le graphique. Vous pouvez styliser les séries en fonction des valeurs pour identifier plus facilement des tendances ou des schémas.
Formatage de l'état.
N/A
N
N
DirectSelectionZoom
Vous permet d'effectuer un zoom avant en sélectionnant deux éléments de données dans le graphique.
Les options disponibles pour cette propriété sont Axe horizontal, Axe vertical, Les deux et Aucun.
Cette propriété apparaît dans la liste des propriétés lorsque vous sélectionnez HorizontalZoom ou VerticalZoom.
STRING
Aucun
O
N
DragSelectionZoom
Vous permet d'effectuer un zoom avant sur une partie spécifique du graphique en faisant glisser une zone de sélection autour de la plage de données que vous souhaitez afficher.
Les options disponibles pour cette propriété sont Axe horizontal, Axe vertical, Les deux et Aucun.
Cette propriété apparaît dans la liste des propriétés lorsque vous sélectionnez HorizontalZoom ou VerticalZoom.
STRING
Aucun
O
N
Disabled
Désactive le widget dans l'application composite.
BOOLEAN
N/A
O
N
DisplaySeriesNOn
Définit l'axe Y ou le groupe d'empilage pour la série de données N.
STRING
N
N
EmptyChartIcon
Spécifie l'icône à afficher lorsque le graphique est vide.
MEDIA
not visible
N
N
EmptyChartLabel
Spécifie le texte à afficher lorsque la table d'informations liée ne contient aucune donnée.
STRING
[[ChartStateLabelEmpty]]
N
O
ErrorStateIcon
Spécifie l'icône à afficher lorsque les données du graphique ne peuvent pas être chargées.
MEDIA
error
N
N
ErrorStateLabel
Spécifie le texte à afficher lorsque les données du graphique ne peuvent pas être chargées.
STRING
[[ChartStateLabelError]]
N
N
ExternalPadding
Définit le remplissage à partir des axes. La valeur de remplissage est un pourcentage de la largeur de la barre.
NUMBER
25
O
N
GroupPadding
Définit le remplissage entre les séries. La valeur de remplissage est un pourcentage de la largeur de la barre.
NUMBER
25
O
N
HideDataTooltips
Masque les info-bulles qui s'affichent lorsque vous pointez ou sélectionnez un point de données dans le graphique.
BOOLEAN
Faux
N
N
HideLegend
Masque la zone de légende.
BOOLEAN
Faux
O
N
HideNotes
Masque la zone de notes.
BOOLEAN
Faux
O
N
HideValues
Masque les étiquettes des valeurs sur le graphique.
BOOLEAN
Faux
O
N
HideXAxis
Masque l'axe X.
BOOLEAN
Faux
O
N
HideYAxisN
Masque l'axe Y de la série de données N.
BOOLEAN
Faux
O
N
HorizontalAxisLabelsRotation
Entrez une valeur comprise entre -180 et 180 pour définir l'angle de rotation des étiquettes sur l'axe horizontal.
NUMBER
Calculé automatiquement
N
N
HorizontalAxisMaxHeight
Définit la hauteur maximale de l'axe horizontal.
NUMBER
85
O
N
HorizontalZoom
Permet d'effectuer un zoom avant ou arrière sur l'axe horizontal.
Lorsque vous sélectionnez cette propriété, les propriétés HorizontalIntervalControl, HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom et DragSelectionZoom s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
HorizontalIntervalControl
Ajoute des contrôles qui vous permettent d'effectuer un zoom avant sur l'axe horizontal en fonction d'intervalles spécifiques.
Les options disponibles sont Aucun, qui est la sélection par défaut, et Liste déroulante.
Lorsque vous sélectionnez Liste déroulante, les propriétés HorizontalIntervalControlLabel et HorizontalIntervalData s'affichent dans la liste des propriétés.
STRING
Aucun
N
N
HorizontalIntervalControlLabel
Spécifie l'étiquette de texte pour les contrôles de zoom d'intervalle sur l'axe horizontal.
STRING
n/a
O
O
HorizontalIntervalData
Source de données pour les options de contrôle de zoom d'intervalle.
Lorsque vous sélectionnez une entrée dans la liste déroulante d'intervalle horizontal, le graphique est agrandi en fonction de la valeur de durée sélectionnée et du point d'ancrage de début/fin.
INFOTABLE
n/a
O
N
HorizontalIntervalAnchorPoint
Vous permet de sélectionner la position d'ancrage de la plage d'intervalles dans le jeu de données.
Sélectionnez Début pour placer l'intervalle au début du jeu de données ou Fin pour placer l'intervalle à la fin.
Par exemple, si vous spécifiez un intervalle de 3 mois dans un jeu de données de 12 mois, vous pouvez sélectionner Début pour afficher les trois premiers mois du jeu de données, ou Fin pour afficher les trois derniers mois.
Cette propriété s'affiche lorsque vous sélectionnez la propriété ShowHorizontalAnchorPointControl.
STRING
Début
O
N
HorizontalIntervalAnchorPointLabel
Spécifie l'étiquette pour le point d'ancrage de l'intervalle sur l'axe horizontal.
Cette propriété s'affiche lorsque vous sélectionnez la propriété ShowHorizontalAnchorPointControl.
STRING
n/a
O
O
HorizontalRangeZoom
Ajoute des contrôles qui vous permettent de spécifier une plage de valeurs sur laquelle effectuer un zoom avant sur l'axe horizontal.
Lorsque vous sélectionnez cette propriété, les propriétés HorizontalStartZoomLabel et HorizontalEndZoomLabel s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
HorizontalRangeZoomDateFormat
Définit le format de date dans la zone de sélection de date lors d'un zoom de sélection de plage. Les formats pris en charge sont basés sur la bibliothèque JavaScript Moment.js et sont sensibles à la casse.
STRING
n/a
N
N
HorizontalRangeZoomDateWidth
Définit la largeur de la zone de sélection de date sur l'axe horizontal lorsque le zoom est activé.
NUMBER
332px
N
N
HorizontalStartZoomLabel
Spécifie l'étiquette de texte de début de sélection de la plage.
STRING
n/a
O
O
HorizontalEndZoomLabel
Spécifie l'étiquette de texte de fin de sélection de la plage.
STRING
n/a
O
O
HorizontalSliderZoom
Ajoute un curseur pour vous permettre d'afficher les données comprises entre une valeur minimale et une valeur maximale sur l'axe horizontal.
Lorsque vous sélectionnez cette propriété, les propriétés HorizontalSliderZoomMaxLabel et HorizontalSliderZoomMinLabel s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
HorizontalSliderZoomMaxLabel
Spécifie l'étiquette de la valeur maximale du curseur de zoom.
STRING
n/a
O
O
HorizontalSliderZoomMinLabel
Spécifie l'étiquette de la valeur minimale du curseur de zoom.
STRING
n/a
O
O
InternalPadding
Définit le remplissage entre les séries. La valeur de remplissage est un pourcentage de la largeur de la barre.
NUMBER
25
O
N
Label
Spécifie l'étiquette de texte à afficher pour le graphique combiné.
STRING
[[ComboChart]]
O
O
LabelReset
Définit l'étiquette affichée sur le bouton Réinitialiser de la barre d'outils du graphique.
STRING
Réinitialiser
O
O
LabelAlignment
Aligne le texte de l'étiquette du widget. Options : Aucun, A gauche, Au centre, A droite.
STRING
A gauche
N
N
LabelPosition
Définit la position de l'étiquette de texte. Options : Aucune, En haut, En bas, A gauche.
STRING
En haut
N
N
LabelType
Définit le type d'étiquette du graphique combiné, par exemple En-tête, En-tête secondaire, Etiquette ou Corps.
STRING
En-tête secondaire
O
N
LegendAlignment
Aligne la légende du graphique.
STRING
A gauche
N
N
LegendFilter
Ajoute des cases à cocher en regard des séries de données dans la légende qui contrôlent la visibilité des séries de données.
BOOLEAN
Faux
N
N
LegendMaxWidth
Définit la largeur maximale de la zone de légende.
NUMBER
736
O
N
LegendPosition
Définit la position de la légende du graphique. Options :
Aucune, A gauche, Au centre, A droite.
STRING
A gauche
N
N
LoadingIcon
Spécifie l'icône à afficher lors du chargement des données du graphique.
STRING
chart_loading_combo_pareto
N
N
Margin
Cette propriété est désactivée. Vous devez définir les marges de ce widget dynamique sur son conteneur.
STRING
5
N
N
MarkerShape
Définit la forme du marqueur pour les points de données sur le graphique. Options : Aucun, Cercle, Carré, Losange.
STRING
Cercle
N
N
MultipleDataSources
Permet de visualiser les données de plusieurs sources dans le graphique.
BOOLEAN
Faux
N
NoDataSourceIcon
Spécifie l'icône à afficher lorsque le graphique n'est pas lié à une source de données.
Média
bind
N
N
NoDataSourceLabel
Spécifie le texte à afficher lorsque le graphique n'est pas lié à une source de données.
STRING
[[ChartStateLabelNoData]]
N
O
Notes
Spécifie le texte à afficher à l'intérieur de la zone des notes dans le graphique. Vous pouvez entrer une chaîne ou sélectionner un jeton de localisation.
STRING
N/A
O
O
NotesAlignment
Aligne le texte à l'intérieur de la zone des notes.
STRING
A gauche
N
N
NotesPosition
Définit la position de la zone des notes.
STRING
En bas
N
N
NumberOfReferenceLines
Définit le nombre de lignes de référence à afficher dans le graphique. Les lignes de référence permettent de mettre en surbrillance les données du graphique par rapport à une valeur spécifique. Vous pouvez ajouter jusqu'à 24 lignes et configurer l'étiquette, l'axe et la valeur de chaque ligne.
NUMBER
0
N
N
NumberOfSeries
Définit le nombre de séries de données à afficher dans le graphique.
NUMBER
8
N
N
NumberOfStacks
Définit le nombre de piles de séries de données à afficher dans le graphique.
NUMBER
0
N
N
NumberOfXLabels
Définit le nombre d'étiquettes sur l'axe X.
NUMBER
Automatique
O
N
NumberOfYaxes
Définit le nombre d'axes Y à afficher dans le graphique.
NUMBER
1
N
N
PointerType
Spécifie l'apparence du pointeur lorsque vous le placez sur le graphique. Vous pouvez utiliser des lignes de repère pour suivre une valeur de données par rapport à un axe. Options : Aucune, Standard, Ligne horizontale, Ligne verticale, Croix.
STRING
Standard
O
N
ReferecneLineNLabel
Définit l'étiquette de texte de la ligne de référence.
STRING
O
O
O
ReferecneLineNValue
Définit la valeur numérique de la ligne de référence.
NUMBER
O
N
O
ReferenceLineNAxis
Spécifie l'axe à utiliser pour la ligne de référence.
STRING
N
N
N
ResetToDefaultValue
Restaure la valeur par défaut des entrées de ce widget.
Service
N/A
O
N
ReverseXAxis
Affiche les valeurs de l'axe X dans l'ordre inverse.
BOOLEAN
Faux
N
N
ReverseYAxis
Inverse l'ordre des valeurs sur l'axe Y.
BOOLEAN
Faux
N
N
RulersInFront
Affiche les règles devant les valeurs des données. Par défaut, les règles sont affichées derrière les données.
BOOLEAN
Faux
O
N
SampleSize
Définit le nombre maximal de points de données à afficher lors de la visualisation de jeux de données volumineux sur le graphique. Pour désactiver l'échantillonnage, définissez cette propriété sur 0.
NUMBER
Automatique
O
N
SelectedData
Table d'informations qui contient les données sélectionnées sur le graphique.
INFOTABLE
N/A
O
N
SelectedSeriesChanged
Evénement déclenché lorsque la série sélectionnée change.
Evénement
N/A
O
N
SelectionMode
Contrôle le nombre de points de données qu'un utilisateur peut sélectionner en même temps. Sélectionnez Plusieurs pour permettre à l'utilisateur de sélectionner plusieurs points de données. Options : Aucun, Par défaut, Une seule, Plusieurs.
STRING
Par défaut
O
N
Series1MarkerShape
Définit la forme du marqueur des points de données de la série 1 du graphique.
STRING
Par défaut
N
N
Series1MarkerSize
Définit la taille du marqueur de la série de données 1.
NUMBER
8
O
N
Series1Type
Définit le type de visualisation utilisé pour afficher les données de la série 1 sur le graphique.
STRING
Par défaut
N
N
Series1ZAxis
Définit l'ordre des séries sur l'axe Z. Par défaut, tous les groupes sont définis sur la même valeur d'axe Z. Les groupes empilés sont organisés en fonction du type de série suivi de cette propriété.
NUMBER
0
N
N
SeriesClicked
Déclenche un événement lorsqu'un clic est effectué sur un point de données du graphique.
Evénement
N/A
O
N
ShowChartBands
Met en surbrillance l'espace réservé aux catégories à barres dans le graphique. Lorsque cette propriété est définie sur vrai, la zone de chaque catégorie est ombrée en gris.
BOOLEAN
Faux
N
N
ShowDataLoading
Afficher une icône de rotation lors du chargement des données.
BOOLEAN
Vrai
N
N
ShowHideLegend
Ajoute un bouton Afficher/Masquer pour permettre aux utilisateurs d'afficher ou de masquer la légende du graphique au moment de l'exécution.
BOOLEAN
Faux
N
N
ShowHorizontalAnchorPointControl
Ajoute les contrôles d'ajustement de la valeur d'ancre pour l'axe horizontal.
Lorsque vous sélectionnez cette propriété, les propriétés HorizontalIntervalAnchorPoint et HorizontalIntervalAnchorPointLabel s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
ShowXAxis
Affiche la règle de l'axe X.
BOOLEAN
Faux
O
N
ShowYAxis
Affiche la règle de l'axe Y.
BOOLEAN
Faux
O
N
ShowXAxisRuler
Affiche la règle de l'axe X.
BOOLEAN
Faux
O
N
ShowYAxisRuler
Affiche la règle de l'axe Y.
BOOLEAN
Faux
O
N
ShowZeroValueRuler
Affiche la règle de valeur zéro.
BOOLEAN
Faux
O
N
SparkView
Affiche une vue simplifiée de la visualisation du graphique. Activez cette propriété pour masquer les étiquettes, les légendes et les règles.
BOOLEAN
Faux
O
N
ShowZoomButtons
Affiche les boutons de zoom avant et arrière dans la barre d'outils du graphique lorsque le zoom horizontal ou vertical est activé.
BOOLEAN
Faux
N
N
TabSequence
Numéro de séquence du widget lorsque vous appuyez sur la touche de tabulation.
NUMBER
0
N
N
ValuesPosition
Définit la position des étiquettes de valeur des données par rapport aux points de données.
STRING
Au-dessus
N
N
ValuesPositionBar
Définit la position des étiquettes de valeur des données par rapport aux barres graphiques.
STRING
En dehors de la barre
N
N
ValuesTooltip
STRING
O
O
VerticalAxisMaxWidth
Définit la largeur maximale de l'axe vertical.
NUMBER
85
O
N
VerticalZoom
Permet d'effectuer un zoom avant ou arrière sur l'axe vertical.
BOOLEAN
Faux
O
N
VerticalSliderZoom
Ajoute un curseur pour vous permettre d'afficher les données comprises entre une valeur minimale et une valeur maximale sur l'axe vertical.
Lorsque vous sélectionnez cette propriété, les propriétés VerticalZoomMaxLabel et VerticalZoomMinLabel s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
VerticalZoomMaxLabel
Spécifie l'étiquette de texte de la valeur maximale du curseur de zoom.
STRING
N/A
O
O
VerticalZoomMinLabel
Spécifie l'étiquette de texte de la valeur minimale du curseur de zoom.
STRING
N/A
O
O
Visible
Lorsque cette option est activée, le widget est visible dans l'application composite.
BOOLEAN
Vrai
O
N
XAxisField
Sélectionnez le champ de table d'informations qui contient les données pour l'axe X.
INFOTABLE
N/A
N
N
XAxisLabel
Spécifie l'étiquette de texte de l'axe X.
STRING
[[XAxis]]
O
O
XAxisLabelAlignment
Aligne l'étiquette de l'axe X.
STRING
A gauche
N
N
XAxisType
Définit le type de format des valeurs de l'axe X.
STRING
Chaîne
O
N
YAxesMaxWidth
Définit la largeur maximale de la zone des axes Y. Une barre de défilement s'affiche lorsque la zone dépasse la largeur maximale.
NUMBER
1200
O
N
YAxisNFormat
Définit le format des valeurs de l'axe Y N.
STRING
0000.0
O
N
YAxisNLabel
Spécifie l'étiquette de texte pour l'axe Y N.
STRING
[[YAxis]]
O
O
YAxisNLabelAlignment
Aligne l'étiquette de l'axe Y N.
STRING
Au milieu
N
N
YAxisNMaximumValue
Définit la valeur maximale de la plage de l'axe Y. Par défaut, la plage est calculée automatiquement en fonction des données du widget.
NUMBER
Automatique
O
N
YAxisNMinimumValue
Définit la valeur minimale de la plage de l'axe Y. Par défaut, la plage est calculée automatiquement en fonction des données du widget.
NUMBER
Automatique
O
N
YAxisNNumberOfLabels
Définit le nombre d'étiquettes pour l'axe Y N.
NUMBER
Automatique
O
N
YAxisNPosition
Spécifie la position de l'axe Y. Lorsque ce paramètre est défini sur Automatique, le premier axe Y affiché est défini comme axe principal et les autres comme axes secondaires.
STRING
Automatique
N
N
YAxisNValuesFormat
Définit le format des étiquettes de valeur sur l'axe Y N.
Cette propriété est disponible lorsque vous définissez HideValues sur "faux".
STRING
O
N
ZeroValueRuler
Contrôle la visibilité des règles de valeur zéro sur le graphique. Vous ne pouvez afficher la règle que pour l'axe Y principal ou secondaire. Options : Axe principal, Axe secondaire, Aucune, Les deux.
STRING
Aucune
O
N
Est-ce que cela a été utile ?