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
Opzioni grafico
Fare clic sull'icona di modifica accanto a Opzioni grafico per accedere all'impostazione Mostra linee griglia per asse X.
Servizio
JavaScript
Descrizione
Aggiorna grafico
updateChart
Aggiorna il 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.