Utilisation des widgets > 2D > Graphique à barres
  
Graphique à barres
A quoi sert ce widget ?
Le widget Graphique à barres vous permet d'afficher des données dans un graphique à barres.
* 
Les données doivent être liées au graphique à barres.
Quand faut-il utiliser ce widget ?
Utilisez le widget Graphique à barre lorsque :
• vous souhaitez afficher les données dans votre expérience ;
• vous souhaitez comparer plusieurs valeurs du même ensemble de données.
Comporte-t-il des propriétés, services, événements ou actions spéciaux ?
Pour afficher la liste des propriétés, services et événements communs des widgets, consultez la rubrique Propriétés, services et événements communs à plusieurs widgets.
Les tableaux suivants présentent les propriétés, les services et les événements spécifiques à ce widget.
Propriété
Description
Options de graphique
Cliquez sur l'icône de modification en regard d'Options de graphique pour accéder au paramètre Afficher les lignes de grille pour l'axe X.
Service
JavaScript
Description
Mettre à jour le graphique
updateChart
Met à jour le graphique.
Fonctionnement du widget
Voici un exemple de ce à quoi peut ressembler votre widget !
Etapes minimales requise pour l'utilisation
Apparence
1. Faites glisser et déposez un widget Graphique à barres sur le canevas.
2. Dans le volet Données, recherchez une entité qui a un service avec une propriété numérique dans le jeu de données.
3. Une fois le service ajouté, faites glisser et déposez Tous les éléments sur le widget, et sélectionnez Données dans la fenêtre Sélectionner une cible de liaison.
4. Dans le volet de Données, sous Configuration, sélectionnez la case à cocher Appeler au démarrage.
5. Sélectionnez une propriété dans la liste déroulante Champ axe X. Dans l'exemple, nous avons sélectionné Vitesse.
6. Sélectionnez une propriété dans la liste déroulante Champ axe Y. Dans l'exemple, nous avons sélectionné RPM.
Styliser le widget avec JavaScript et CSS
Vous pouvez utiliser JavaScript pour styliser le widget ! Exemple :
* 
Rappelez-vous qu'il est préférable de donner à vos classes des noms uniques afin qu'ils ne soient pas en conflit avec d'autres classes ou propriétés prédéfinies.
Exemple
Apparence
1. Saisissez ce qui suit dans l'éditeur JavaScript :
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#912f46";
Chart.defaults.global.defaultFontColor="#00acc8";
Chart.defaults.global.defaultFontSize=20;
Chart.defaults.global.title.display=true;
2. Ajoutez la classe suivante dans l'éditeur d'application :
.ptc-barchart {
height: 500px;
}
3. Entrez la nouvelle classe dans le champ Classe du graphique à barres.
Pour plus d'informations, consultez les rubriques Utilisation de JavaScript dans Vuforia Studio et Styles d'application.
Champs de configuration assistée après la liaison de données ThingWorx
Une fois des données ThingWorx liées au widget, certains champs sont renseignés au moyen d'options dans une liste déroulante. Par exemple, si vous liez Tous les éléments au widget Graphique à barres et que vous sélectionnez Données dans la fenêtre Sélectionner une cible de liaison, les options disponibles Champ axe X et Champ axe Y présentent les options disponibles.