Mashup Builder > Widgets > Widgets standard > Widget Graphique de Pareto (thématisable)
Widget Graphique de Pareto (thématisable)
Introduction
Affiche un graphique de Pareto.
Un graphique de Pareto est un type de graphique qui utilise à la fois des barres et une courbe. Les valeurs individuelles sont représentées dans l'ordre décroissant par les barres et la courbe représente les valeurs cumulées. La courbe de cumul d'un graphique de Pareto est automatiquement calculée en fonction des données des barres.
Visionnez la vidéo suivante qui explique comment créer un graphique de Pareto dans le Mashup Builder. Pour visualiser la vidéo dans une fenêtre plus grande, cliquez sur le titre de la vidéo.
* 
• Le widget Graphique de Pareto est disponible à partir de la version 9.1 de ThingWorx.
• Ce widget est disponible sous la forme d'une inclusion Standard sur la plateforme et également en tant que composant Web si vous effectuez une importation à partir du SDK.
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'}
value1:{name:'value2',baseType:'NUMBER'}
Utilisation
Définit les valeurs de l'axe X pour la barre ou la colonne de graphique. Le type de base STRING doit être défini pour les données. 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
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 de la deuxième série de données.
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 :
Table de propriétés
Le tableau suivant répertorie les propriétés disponibles dans ThingWorx 9.4 et versions ultérieures :
Nom de la propriété
Description
Type de base
Valeur par défaut
Liable
Localisable
SampleSize
Spécifie le nombre de séries de données à afficher dans le graphique.
NUMBER
n/a
N
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
EmptyChartIcon
Spécifie l'icône à afficher lorsque le graphique est vide.
Entité de média
not visible
N
N
EmptyChartLabel
Spécifie le texte à afficher lorsque le graphique est vide.
STRING
[[ChartStateLabelEmpty]]
N
O
ErrorStateIcon
Spécifie l'icône à afficher lorsque le graphique est vide.
Entité de média
error
N
N
ErrorStateLabel
Spécifie le texte à afficher lorsque le graphique est vide.
STRING
N
O
LoadingIcon
Spécifie l'icône à afficher lors du chargement des données du graphique.
Entité de média
chart loading icon
N
N
NoDataSourceIcon
Spécifie l'icône à afficher lorsque le graphique n'est pas lié à une source de données.
Entité de 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
Les propriétés du widget Graphique de Pareto sont les suivantes :
Nom de la propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Localisable ? (O/N)
CumulativeLineLabel
Spécifie le texte à afficher pour l'étiquette de la courbe de cumul dans la zone de légende.
STRING
Pourcentage
O
O
CumulativeLineMarkerShape
Définit la forme du marqueur pour les points de données sur la courbe de cumul.
Les options disponibles sont Cercle, Carré, Losange et Aucun.
STRING
Circle
O
N
CumulativeLineMarkerSize
Définit la taille du marqueur pour les points de données sur la courbe de cumul.
NUMBER
8
O
N
CustomClass
Classe CSS définie par l'utilisateur à appliquer à la div supérieure du widget. Plusieurs classes peuvent être spécifiées, séparées par une espace.
STRING
n/a
O
N
Data
Source de données table d'informations du graphique.
INFOTABLE
n/a
O
N
DataLabel1 — DataLabel24
Ces propriétés sont répertoriées lorsque vous définissez NumberOfSereis sur un nombre spécifique. Vous pouvez utiliser les propriétés pour spécifier une étiquette personnalisée pour chaque série de données dans la légende. Pour plus d'informations, consultez la rubrique Personnalisation de la légende du graphique.
STRING
n/a
N
O
DataSeriesStyle
Configure le formatage d'état de toutes les séries de données du graphique.
Vous pouvez styliser les séries en fonction des valeurs pour identifier plus facilement des tendances ou des schémas.
Pour configurer les règles de formatage de chaque série de données, entrez une valeur spécifique pour la propriété NumberOfSeries.
STATEDEFINITION
n/a
N
N
EmphasizeThresholdFactors
Vous permet de mettre en évidence les données qui sont en dessous de la valeur seuil spécifiée.
BOOLEAN
Faux
O
N
ExternalPadding
Définit le remplissage à partir des axes. Le remplissage correspond à un pourcentage de la largeur de barre.
NUMBER
25
O
N
HideCumulativeLine
Masque la courbe qui affiche le pourcentage cumulé.
BOOLEAN
Faux
O
N
HideLegend
Masque la zone de légende.
BOOLEAN
Faux
O
N
HideNotes
Masque la zone de notes.
BOOLEAN
Faux
O
N
HideSecondYAxis
Masque le deuxième axe Y.
BOOLEAN
Faux
O
N
HideXAxis
Masque l'axe X.
BOOLEAN
Faux
O
N
HideYAxis
Masque l'axe Y.
BOOLEAN
Faux
O
N
HorizontalAxisMaxHeight
Définit la hauteur maximale de l'axe horizontal.
NUMBER
85
O
N
HorizontalAxisLabelsRotation
Définit l'angle de rotation des étiquettes sur l'axe horizontal. Vous pouvez entrer une valeur comprise entre -180 et 180.
NUMBER
Redimensionnement automatique
N
N
HorizontalZoom
Vous permet d'effectuer un zoom avant sur l'axe horizontal.
Lorsque vous sélectionnez cette propriété, les propriétés supplémentaires HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom et DragSelectionZoom s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
DirectSelectionZoom
Vous permet d'effectuer directement un zoom avant en sélectionnant deux éléments de données dans le graphique.
Les options disponibles sont Axe horizontal et Aucun.
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 sont Axe horizontal et Aucun.
STRING
Aucun
O
N
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
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 HorizontalSliderZoomMinLabel et HorizontalSliderZoomMaxLabel s'affichent dans la liste des propriétés.
BOOLEAN
Faux
O
N
HorizontalSliderZoomMinLabel
Spécifie l'étiquette de texte de la valeur minimale du curseur de zoom.
STRING
n/a
O
O
HorizontalSliderZoomMaxLabel
Spécifie l'étiquette de texte de la valeur maximale du curseur de zoom.
STRING
n/a
O
O
InternalPadding
Définit le remplissage entre les séries. Le remplissage correspond à un pourcentage de la largeur de barre.
NUMBER
25
O
N
Label
Spécifie l'étiquette de texte qui s'affiche pour le graphique de Pareto.
STRING
Graphique de Pareto
O
O
LabelAlignment
Aligne le texte de l'étiquette du widget A gauche, Au centre ou A droite.
STRING
Gauche
N
N
LabelPosition
Définit la position de l'étiquette de texte En haut ou En bas.
STRING
En haut
N
N
LabelReset
Spécifie l'étiquette du bouton qui réinitialise le zoom des graphiques.
STRING
Réinitialiser
O
O
LabelType
Définit le type d'étiquette du graphique de Pareto sur En-tête, En-tête secondaire, Etiquette ou Corps.
STRING
En-tête secondaire
O
N
LegendAlignment
Aligne le texte de la légende En haut, Au milieu ou En bas.
Les options disponibles pour cette propriété dépendent du paramétrage de la propriété LegendPosition.
STRING
En haut
N
N
LegendFilter
Ajoute un filtre de légende qui vous permet de filtrer le graphique lors de l'exécution.
BOOLEAN
Faux
N
N
LegendMarkerShapes
Définit la forme du marqueur de la légende de série de données sur Carré, Cercle ou Aucun.
STRING
Carré
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 En haut, A droite, En bas ou A gauche.
STRING
A droite
N
N
LineValuesPosition
Définit la position des étiquettes de valeurs par rapport aux points de données sur la courbe.
Les options disponibles sont Au-dessus, Chevauchement ou En dessous.
STRING
Au-dessus
N
N
MultipleDataSources
Vous permet de visualiser les données de plusieurs sources de données sur le graphique.
Lorsque vous sélectionnez cette propriété, les propriétés supplémentaires DataSource et XAxisField s'affichent dans la liste des propriétés.
BOOLEAN
Faux
N
N
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 A gauche, Au centre ou A droite.
STRING
Gauche
N
N
NotesPosition
Définit la position de la zone des notes En haut ou En bas.
STRING
En bas
N
N
NumberOfSeries
Définit le nombre de séries de données à afficher dans le graphique. Par défaut, le paramètre Automatique affiche toutes les séries des données de la table d'informations.
En fonction de vos réglages, des propriétés de table d'informations DataField supplémentaires s'affichent dans la liste des propriétés, que vous pouvez utiliser pour l'affichage de la série de données correspondante. De plus, des propriétés de formatage d'état DataSeriesStyle supplémentaires s'affichent dans la liste des propriétés.
NUMBER
Automatique
N
N
NumberOfYLabels
Définit le nombre d'étiquettes à afficher sur l'axe Y.
* 
Cette propriété est disponible dans ThingWorx 9.3.2 et versions ultérieures.
NUMBER
Automatique
N
N
ResetToDefaultValue
Restaure la valeur par défaut des entrées de ce widget.
n/a
n/a
O
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
SecondYAxisLabel
Spécifie l'étiquette de texte du deuxième axe Y.
STRING
Pourcentage
O
O
SecondYAxisLabelAlignment
Aligne l'étiquette du deuxième axe Y En haut, Au milieu ou En bas.
STRING
Au milieu
N
N
SecondYAxisMaximumValues
Définit la plage de valeurs maximale du deuxième axe Y. Par défaut, la maximale est de 100 %.
NUMBER
Automatique
O
N
SecondYAxisMinimumValues
Définit la plage de valeurs minimale du deuxième axe Y. Par défaut, la minimale est de 0 %.
NUMBER
Automatique
O
N
SeriesClicked
Déclenche un événement lorsqu'un clic est effectué sur un point de données du graphique.
n/a
n/a
O
N
ShowLineValues
Affiche les étiquettes des valeurs de la courbe dans le graphique.
BOOLEAN
Faux
O
N
ShowHideLegend
Ajoute un bouton afficher/masquer qui vous permet d'afficher ou de masquer la légende du graphique à l'exécution.
* 
Cette propriété est disponible dans ThingWorx 9.3.0 et versions ultérieures.
BOOLEAN
Faux
N
N
ShowValues
Affiche les étiquettes des valeurs sur le graphique.
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
SparkView
Affiche une vue simplifiée de la visualisation du graphique.
Sélectionnez 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é.
* 
Cette propriété est disponible dans ThingWorx 9.3.5 et versions ultérieures.
BOOLEAN
Faux
N
N
TabSequence
Numéro de séquence du widget lorsque vous appuyez sur la touche de tabulation.
NUMBER
0
N
N
ThresholdLine
Vous permet d'afficher une ligne horizontale ou verticale qui marque la valeur seuil du pourcentage cumulé.
Les options disponibles pour cette propriété sont Horizontal, Vertical, Les deux ou Aucun.
STRING
Horizontal
O
N
ThresholdValue
Définit la valeur en pourcentage de la ligne du seuil.
NUMBER
80
O
N
VerticalAxisMaxWidth
Définit la largeur maximale de l'axe vertical.
NUMBER
85
O
N
XAxisField
Spécifie la colonne de la table d'informations avec les données de catégories à afficher dans le graphique.
INFOTABLE
n/a
N
N
XAxisLabel
Spécifie l'étiquette de texte de l'axe X.
STRING
Axe X
O
O
XAxisLabelAlignment
Aligne l'étiquette de l'axe X A gauche, Au centre ou A droite.
STRING
Au centre
N
N
YAxisFormat
Définit le format des valeurs de l'axe Y.
STRING
0000.0
O
N
YAxisLabel
Spécifie l'étiquette de texte de l'axe Y.
STRING
Axe Y
O
O
YAxisLabelAlignment
Aligne l'étiquette de texte de l'axe Y En haut, Au milieu ou En bas.
STRING
Au milieu
N
N
YAxisMaximumValues
Définit la plage de valeurs maximale de l'axe Y. Par défaut, la plage est calculée automatiquement en fonction des données du widget. La valeur de cette propriété est ignorée si les données du graphique contiennent une valeur plus grande.
NUMBER
Automatique
O
N
YAxisMinimumValues
Définit la plage de valeurs minimale de l'axe Y. Par défaut, la plage est calculée automatiquement en fonction des données du widget. La valeur de cette propriété est ignorée si les données du graphique contiennent une valeur plus petite.
NUMBER
Automatique
O
N
Est-ce que cela a été utile ?