Utilizzo dei widget > 2D > Grafico serie temporale
Grafico serie temporale
Qual è la funzione di questo widget?
Il widget Grafico serie temporale è progettato per l'utilizzo con i dati delle serie temporali in cui l'asse X rappresenta il tempo. Questo grafico supporta solo il rendering di marker a linee e/o a punti.
* 
I dati devono essere associati al widget Grafico serie temporale.
Quando va utilizzato questo widget?
È possibile utilizzare un widget Grafico serie temporale per illustrare punti dati a intervalli di tempo consecutivi. Ad esempio, se si desidera visualizzare un grafico che mostri gli RPM di un autocarro nell'ultima ora, si può utilizzare un widget Grafico serie temporale e associare al widget come Dati la proprietà RPM dell'autocarro connesso.
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.
Proprietà
JavaScript
Tipo
Descrizione
Campo asse X
labelsField
string
I dati visualizzati per l'asse X di un grafico. Immettere manualmente il nome del campo. Ad esempio, digitare "Nome".
Campo asse Y
valuesField
string
I dati visualizzati per l'asse Y di un grafico. Immettere manualmente il nome del campo. Ad esempio, digitare "Utente".
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 serie temporale nell'area di lavoro.
2. Nel riquadro Dati, cercare un'entità con un servizio che restituisce dati cronologici.
3. Dopo avere aggiunto il servizio, trascinare e rilasciare Tutti gli elementi nel widget e selezionare Dati nella finestra Seleziona destinazione associazione.
4. Selezionare una proprietà dal menu a discesa Campo asse X. Nell'esempio abbiamo selezionato Speed.
5. Selezionare una proprietà dal menu a discesa Campo asse Y. Nell'esempio abbiamo selezionato RPM.
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 serie temporale e si seleziona Dati nella finestra Seleziona destinazione associazione, le proprietà Campo asse X e Campo asse Y vengono completate con le opzioni disponibili.
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
Immettere quanto segue nell'editor JavaScript:
 // Chart Legends
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#ffffff";
Chart.defaults.global.defaultFontColor="#0000ff";
Chart.defaults.global.defaultFontSize=10;
Chart.defaults.global.title.display=true;
//For timeseries LINES
Chart.defaults.global.elements.line.backgroundColor="#ffffff";
Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)';
// for time series POINTS
Chart.defaults.global.elements.point.backgroundColor="#ffffff";
Chart.defaults.global.elements.point.borderColor="#007777";
Chart.defaults.global.elements.point.radius=2;
Immettere quanto segue nell'editor JavaScript:
1. Immettere quanto segue nell'editor JavaScript:
// Time Series lines
Chart.defaults.global.elements.line.borderColor='rgba(0, 50, 255, 0.7)';
Chart.defaults.global.elements.line.backgroundColor="#add8e6"
Chart.defaults.global.elements.line.fill='top';
// Time Series points
Chart.defaults.global.elements.point.backgroundColor="rgba(255, 255, 0, 0.7)";
Chart.defaults.global.elements.point.borderColor="rgba(255, 0, 0, 1)";
Chart.defaults.global.elements.point.radius=5;
// Time Series chart legend, title, font settings
Chart.defaults.global.defaultFontColor="#0000ff";
Chart.defaults.global.legend.display=true;
Chart.defaults.global.legend.labels.fontColor="#ff0000";
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.title.text="Title of line chart";
Chart.defaults.global.title.display=true;
2. Aggiungere la classe seguente nell'editor dell'applicazione:
.ptc-TimeSeries {
  height: 400px;
}
3. Immettere la nuova classe nel campo Classe del grafico della serie temporale.
1. Immettere quanto segue nell'editor JavaScript:
Chart.defaults.global.legend.position="bottom";
Chart.defaults.global.legend.labels.fontColor="#5bb73b";
Chart.defaults.global.defaultFontColor="#007a3e";
Chart.defaults.global.defaultFontSize=14;
Chart.defaults.global.title.display=true;
//For timeseries LINES
Chart.defaults.global.elements.line.backgroundColor="#ffffff";
Chart.defaults.global.elements.line.borderColor="#5bb73b";
2. Aggiungere la classe seguente nell'editor dell'applicazione:
.ptc-TimeSeries {
  height: 400px;
}
3. Immettere la nuova classe nel campo Classe del grafico della serie temporale.
Per un elenco completo delle proprietà che si possono aggiornare, vedere https://www.chartjs.org/docs/latest.
Per ulteriori informazioni, vedere Utilizzo di JavaScript in Vuforia Studio e Stili dell'applicazione.
È stato utile?