Utilizzo dei widget > 2D > Grafico a barre
  
Grafico a barre
Qual è la funzione di questo widget?
Il widget Grafico a barre consente di visualizzare i dati all'interno di un grafico a barre.
* 
I dati devono essere associati al grafico a barre.
Quando va utilizzato questo widget?
Utilizzare un widget Grafico a barre nei casi indicati di seguito.
Si desidera visualizzare dati nell'esperienza.
Si desidera confrontare più valori dello stesso insieme di dati.
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
Le seguenti tabelle riportano un elenco di proprietà, servizi ed eventi specifici di questo widget.
Proprietà
Descrizione
Mostra linee griglia per asse X
È possibile selezionare questa opzione facendo clic sull'icona di modifica accanto a Opzioni grafico.
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
Passi fondamentali richiesti per l'uso
Come si presenta
1. Trascinare e rilasciare un widget Grafico a barre nell'area di lavoro.
2. Nel riquadro Dati, cercare un'entità che dispone di un servizio con una proprietà numerica nell'insieme di dati.
3. Dopo avere aggiunto il servizio, trascinare e rilasciare Tutti gli elementi nel widget e selezionare Dati nella finestra Seleziona destinazione associazione.
4. Nel riquadro Dati, in Configurazione, selezionare la casella di controllo Richiama all'avvio.
5. Selezionare una proprietà dal menu a discesa Campo asse X. Nell'esempio abbiamo selezionato Speed.
6. Selezionare una proprietà dal menu a discesa Campo asse Y. Nell'esempio abbiamo selezionato RPM.
Definire lo stile del widget con JavaScript e CSS
Per definire lo stile del widget è possibile utilizzare JavaScript. Esempio:
* 
È consigliabile assegnare nomi univoci alle classi in modo che non siano in conflitto con altre classi o proprietà predefinite.
Esempio
Come si presenta
1. Immettere quanto segue nell'editor 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. Aggiungere la classe seguente nell'editor dell'applicazione:
.ptc-barchart {
height: 500px;
}
3. Immettere la nuova classe nel campo Classe del grafico a barre.
Per ulteriori informazioni, vedere Utilizzo di JavaScript in Vuforia Studio e Stili dell'applicazione.
Campi di configurazione assistita in seguito all'associazione dei dati ThingWorx
Dopo avere associato i dati ThingWorx al widget, alcuni campi vengono completati con le opzioni di un elenco a discesa. Ad esempio, se si associa Tutti gli elementi al widget Grafico a barre e si seleziona Dati nella finestra Seleziona destinazione associazione, le proprietà Campo asse X e Campo asse Y vengono completate con le opzioni disponibili.