Widget Grafico di Pareto (con tema applicabile)
Introduzione
Visualizza un grafico di Pareto.
Il grafico di Pareto è un tipo di grafico che è una combinazione di grafici a barre e un grafico a linee. I singoli valori vengono rappresentati in ordine decrescente con i grafici a barre, mentre un valore cumulativo viene rappresentato con il grafico a linee. La riga cumulativa nel grafico di Pareto viene calcolata automaticamente in base ai dati nelle barre.
Guardare il video che segue che illustra come creare un grafico di Pareto in Mashup Builder. Per visualizzare il video in una finestra più grande, fare clic sul titolo.
 | • Il widget Grafico di Pareto è disponibile a partire da ThingWorx 9.1 e versioni successive. • Questo widget è disponibile come inclusione Standard nella piattaforma e come componente Web se si esegue l'importazione dall'SDK. |
Formato dati
È necessario creare un'infotable con definizioni di campi che rappresentano la struttura dati del grafico. L'infotable deve includere una definizione di campo per i valori degli assi X e Y. È possibile aggiungere più serie di dati inserendo ulteriori colonne con definizioni di campo per i valori delle serie di dati. Ogni riga dell'infotable rappresenta una categoria sull'asse X e i corrispondenti valori sull'asse Y. Nella tabella seguente è indicato il formato dei dati per l'infotable:
Asse X | Valore dell'asse Y | Valore N dell'asse Y | |
|---|---|---|---|
Definizione di campo | x:{name:'x',baseType:'STRING'} | value1:{name:'value1',baseType:'NUMBER'} | value1:{name:'value2',baseType:'NUMBER'} |
Utilizzo | Definisce i valori dell'asse X per la barra o la colonna del diagramma. I dati devono essere di un tipo di base STRING. Ogni riga viene visualizzata come categoria sull'asse X. Il nome definito per questa colonna è l'opzione da selezionare per la proprietà del widget XAaxisField. | Definisce il valore dell'asse Y e l'etichetta della legenda per la categoria. | Definisce il valore dell'asse Y e l'etichetta della legenda per ogni serie di dati aggiuntiva. |
Tipo di base | STRING | NUMBER | NUMBER |
Esempio di riga | x:'Apple' - dove Apple è il nome della categoria da visualizzare sull'asse X. | value1:10 - il valore dell'asse Y per la categoria. | value2:30 - il valore dell'asse Y per la seconda serie di dati. |
Nell'immagine seguente viene illustrato un esempio di dati restituiti da un'infotable con quattro definizioni di campo per l'asse Y:
Tabella delle proprietà
Nella tabella seguente sono elencate le proprietà disponibili in ThingWorx 9.4 o versioni successive:
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile | Localizzabile |
|---|---|---|---|---|---|
SampleSize | Specifica il numero di punti dati da visualizzare sul grafico. | NUMBER | n/d | N | N |
ShowZoomButtons | Mostra i pulsanti per lo zoom avanti e indietro sulla barra degli strumenti del grafico quando è attivato lo zoom orizzontale o verticale. | BOOLEAN | False | N | N |
EmptyChartIcon | Specifica l'icona da visualizzare quando il grafico è vuoto. | Entità multimediale | not visible | N | N |
EmptyChartLabel | Specifica il testo da visualizzare quando il grafico è vuoto. | STRING | [[ChartStateLabelEmpty]] | N | Y |
ErrorStateIcon | Specifica l'icona da visualizzare quando il grafico è vuoto. | Entità multimediale | error | N | N |
ErrorStateLabel | Specifica il testo da visualizzare quando il grafico è vuoto. | STRING | N | Y | |
LoadingIcon | Specifica l'icona da visualizzare durante il caricamento dei dati del grafico. | Entità multimediale | chart loading icon | N | N |
NoDataSourceIcon | Specifica l'icona da visualizzare quando il grafico non è associato a un'origine dati. | Entità multimediale | bind | N | N |
NoDataSourceLabel | Specifica il testo da visualizzare quando il grafico non è associato a un'origine dati. | STRING | [[ChartStateLabelNoData]] | N | Y |
Di seguito sono riportate le proprietà del widget Grafico di Pareto:
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile? (Y/N) | Localizzabile? (Y/N) | ||
|---|---|---|---|---|---|---|---|
CumulativeLineLabel | Specifica il testo visualizzato per l'etichetta della linea cumulativa nell'area della legenda. | STRING | Percentuale | Y | Y | ||
CumulativeLineMarkerShape | Imposta la forma dell'indicatore dei punti dati sulla linea cumulativa. Le opzioni disponibili sono Cerchio, Quadrato, Rombo o Nessuna. | STRING | Cerchio | Y | N | ||
CumulativeLineMarkerSize | Imposta la dimensione dell'indicatore dei punti dati sulla linea cumulativa. | NUMBER | 8 | Y | N | ||
CustomClass | Classe CSS definita dall'utente applicata al div superiore del widget. È possibile inserire più classi, separate da uno spazio. | STRING | n/d | Y | N | ||
Data | Origine dati dell'infotable per il grafico. | INFOTABLE | n/d | Y | N | ||
DataLabel1 - DataLabel24 | Queste proprietà vengono elencate quando si imposta NumberOfSereis su un numero specifico. È possibile utilizzare le proprietà per specificare un'etichetta personalizzata per ogni serie di dati nella legenda. Per ulteriori informazioni, vedere Personalizzazione della legenda del grafico. | STRING | n/d | N | Y | ||
DataSeriesStyle | Configura la formattazione dello stato per tutte le serie di dati sul grafico. È possibile applicare lo stile alle serie in base ai valori dei dati per individuare più facilmente i trend e gli schemi. Per configurare le regole di formattazione per ciascuna serie di dati, immettere un valore specifico per la proprietà NumberOfSeries. | STATEDEFINITION | n/d | N | N | ||
EmphasizeThresholdFactors | Consente di enfatizzare i dati al di sotto del valore di soglia specificato. | BOOLEAN | False | Y | N | ||
ExternalPadding | Imposta la spaziatura interna rispetto agli assi. La spaziatura interna è una percentuale della larghezza della barra. | NUMBER | 25 | Y | N | ||
HideCumulativeLine | Nasconde la linea che mostra la percentuale cumulativa. | BOOLEAN | False | Y | N | ||
HideLegend | Nasconde l'area della legenda. | BOOLEAN | False | Y | N | ||
HideNotes | Nasconde l'area delle note. | BOOLEAN | False | Y | N | ||
HideSecondYAxis | Nasconde il secondo asse Y. | BOOLEAN | False | Y | N | ||
HideXAxis | Nasconde l'asse X. | BOOLEAN | False | Y | N | ||
HideYAxis | Nasconde l'asse Y. | BOOLEAN | False | Y | N | ||
HorizontalAxisMaxHeight | Imposta un'altezza massima per l'asse orizzontale. | NUMBER | 85 | Y | N | ||
HorizontalAxisLabelsRotation | Imposta l'angolo di rotazione delle etichette sull'asse orizzontale. È possibile immettere un valore compreso tra -180 e 180. | NUMBER | Ridimensionamento automatico | N | N | ||
HorizontalZoom | Consente di eseguire lo zoom avanti sull'asse orizzontale. Quando si seleziona questa proprietà, vengono visualizzate altre proprietà HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom e DragSelectionZoom nell'elenco delle proprietà. | BOOLEAN | False | Y | N | ||
DirectSelectionZoom | Consente di eseguire direttamente lo zoom avanti selezionando due elementi di dati nel grafico. Le opzioni disponibili sono Asse orizzontale e Nessuno. | STRING | Nessuno | Y | N | ||
DragSelectionZoom | Consente di eseguire lo zoom avanti di una parte specifica del grafico disegnando un riquadro di selezione intorno all'intervallo dei dati che si desidera visualizzare. Le opzioni disponibili sono Asse orizzontale e Nessuno. | STRING | Nessuno | Y | N | ||
HorizontalRangeZoom | Aggiunge i controlli che consentono di specificare un intervallo di valori per eseguire lo zoom avanti sull'asse orizzontale. Quando si seleziona questa proprietà, vengono visualizzate le proprietà HorizontalStartZoomLabel e HorizontalEndZoomLabel nell'elenco delle proprietà. | BOOLEAN | False | Y | N | ||
HorizontalStartZoomLabel | Specifica l'etichetta di testo per l'inizio della selezione dell'intervallo. | STRING | n/d | Y | Y | ||
HorizontalEndZoomLabel | Specifica l'etichetta di testo per la fine della selezione dell'intervallo. | STRING | n/d | Y | Y | ||
HorizontalSliderZoom | Aggiunge un controllo del dispositivo di scorrimento che consente di visualizzare i dati tra un valore minimo e un valore massimo sull'asse orizzontale. Quando si seleziona questa proprietà, vengono visualizzate le proprietà HorizontalSliderZoomMinLabel e HorizontalSliderZoomMaxLabel nell'elenco delle proprietà. | BOOLEAN | False | Y | N | ||
HorizontalSliderZoomMinLabel | Specifica l'etichetta di testo per il valore minimo del controllo di zoom del dispositivo di scorrimento. | STRING | n/d | Y | Y | ||
HorizontalSliderZoomMaxLabel | Specifica l'etichetta di testo per il valore massimo del controllo di zoom del dispositivo di scorrimento. | STRING | n/d | Y | Y | ||
InternalPadding | Imposta la spaziatura interna tra le serie. La spaziatura interna è una percentuale della larghezza della barra. | NUMBER | 25 | Y | N | ||
Label | Specifica l'etichetta di testo visualizzata per il grafico di Pareto. | STRING | Grafico di Pareto | Y | Y | ||
LabelAlignment | Allinea il testo dell'etichetta del widget A sinistra, Al centro o A destra. | STRING | A sinistra | N | N | ||
LabelPosition | Imposta la posizione dell'etichetta di testo In alto o In basso. | STRING | In alto | N | N | ||
LabelReset | Specifica l'etichetta del pulsante che reimposta lo zoom dei grafici. | STRING | Reimposta | Y | Y | ||
LabelType | Imposta il tipo di etichetta del grafico di Pareto come Intestazione, Sottointestazione, Etichetta o Corpo. | STRING | Sottointestazione | Y | N | ||
LegendAlignment | Allinea il testo della legenda In alto, In mezzo o In basso. Le opzioni disponibili per questa proprietà dipendono dall'impostazione della proprietà LegendPosition. | STRING | In alto | N | N | ||
LegendFilter | Aggiunge un filtro delle legende che consente di filtrare il grafico in fase di esecuzione. | BOOLEAN | False | N | N | ||
LegendMarkerShapes | Imposta la forma dell'indicatore delle legende delle serie di dati come Quadrato, Cerchio o Nessuna. | STRING | Quadrato | N | N | ||
LegendMaxWidth | Imposta una larghezza massima per l'area della legenda. | NUMBER | 736 | Y | N | ||
LegendPosition | Imposta la posizione della legenda del grafico In alto, A destra, In basso o A sinistra. | STRING | A destra | N | N | ||
LineValuesPosition | Imposta la posizione delle etichette dei valori relative ai punti dati sulla linea. Le opzioni disponibili sono Sopra, Sovrapposizione o Sotto. | STRING | Sopra | N | N | ||
MultipleDataSources | Consente di visualizzare i dati di più origini dati nel grafico. Quando si seleziona questa proprietà, vengono visualizzate altre proprietà DataSource e XAxisField nell'elenco delle proprietà. | BOOLEAN | False | N | N | ||
Notes | Specifica il testo visualizzato all'interno dell'area delle note nel grafico. È possibile inserire una stringa o selezionare un token di localizzazione. | STRING | n/d | Y | Y | ||
NotesAlignment | Allinea il testo all'interno dell'area delle note A sinistra, Al centro o A destra. | STRING | A sinistra | N | N | ||
NotesPosition | Imposta la posizione dell'area delle note In alto o In basso. | STRING | In basso | N | N | ||
NumberOfSeries | Imposta il numero di serie di dati visualizzate nel grafico. Per default, l'impostazione Automatico visualizza tutte le serie nei dati dell'infotable. In base all'impostazione, nell'elenco delle proprietà vengono visualizzate altre proprietà DataField dell'infotable che è possibile utilizzare per visualizzare il numero di serie di dati corrispondente. Inoltre nell'elenco delle proprietà vengono visualizzate altre proprietà di formattazione dello stato DataSeriesStyle. | NUMBER | Automatico | N | N | ||
NumberOfYLabels | Imposta il numero di etichette da visualizzare sull'asse Y.
| NUMBER | Automatico | N | N | ||
ResetToDefaultValue | Ripristina i valori di default degli input di questo widget. | n/d | n/d | Y | N | ||
RulersInFront | Mostra i righelli davanti ai valori dei dati. Per default, i righelli vengono visualizzati dietro i dati. | BOOLEAN | False | Y | N | ||
SecondYAxisLabel | Specifica l'etichetta di testo del secondo asse Y. | STRING | Percentuale | Y | Y | ||
SecondYAxisLabelAlignment | Allinea l'etichetta del secondo asse Y In alto, In mezzo o In basso. | STRING | In mezzo | N | N | ||
SecondYAxisMaximumValues | Imposta l'intervallo massimo per i valori del secondo asse Y. Per default, il valore massimo è 100%. | NUMBER | Automatico | Y | N | ||
SecondYAxisMinimumValues | Imposta l'intervallo minimo per i valori del secondo asse Y. Per default, il valore minimo è 0%. | NUMBER | Automatico | Y | N | ||
SeriesClicked | Attiva un evento quando si fa clic su un punto dati sul grafico. | n/d | n/d | Y | N | ||
ShowLineValues | Mostra le etichette dei valori visualizzate sulla linea all'interno del grafico. | BOOLEAN | False | Y | N | ||
ShowHideLegend | Aggiunge un pulsante Mostra/Nascondi che consente di mostrare o nascondere la legenda del grafico in fase di esecuzione.
| BOOLEAN | False | N | N | ||
ShowValues | Mostra le etichette dei valori sul grafico. | BOOLEAN | False | Y | N | ||
ShowXAxisRuler | Mostra il righello dell'asse X. | BOOLEAN | False | Y | N | ||
ShowYAxisRuler | Mostra il righello dell'asse Y. | BOOLEAN | False | Y | N | ||
SparkView | Mostra una vista semplificata della visualizzazione del grafico. Selezionare questa proprietà per nascondere le etichette, le legende e i righelli. | BOOLEAN | False | Y | N | ||
ShowZoomButtons | Mostra i pulsanti per lo zoom avanti e indietro sulla barra degli strumenti del grafico quando è attivato lo zoom orizzontale o verticale.
| BOOLEAN | False | N | N | ||
TabSequence | Numero di sequenza del widget quando si preme TAB. | NUMBER | 0 | N | N | ||
ThresholdLine | Consente di visualizzare una linea orizzontale o verticale che contrassegna il valore di soglia della percentuale cumulativa. Le opzioni disponibili per questa proprietà sono Orizzontale, Verticale, Entrambe o Nessuna. | STRING | Orizzontale | Y | N | ||
ThresholdValue | Imposta il valore in percentuale della linea di soglia. | NUMBER | 80 | Y | N | ||
VerticalAxisMaxWidth | Imposta una larghezza massima per l'asse verticale. | NUMBER | 85 | Y | N | ||
XAxisField | Specifica la colonna dell'infotable con i dati per le categorie visualizzati nel grafico. | INFOTABLE | n/d | N | N | ||
XAxisLabel | Specifica l'etichetta di testo dell'asse X. | STRING | Asse X | Y | Y | ||
XAxisLabelAlignment | Allinea l'etichetta dell'asse X A sinistra, Al centro o A destra. | STRING | Al centro | N | N | ||
YAxisFormat | Imposta il formato per i valori dell'asse Y. | STRING | 0000,0 | Y | N | ||
YAxisLabel | Specifica l'etichetta di testo dell'asse Y. | STRING | Asse Y | Y | Y | ||
YAxisLabelAlignment | Allinea l'etichetta di testo dell'asse Y In alto, In mezzo o In basso. | STRING | In mezzo | N | N | ||
YAxisMaximumValues | Imposta l'intervallo massimo per i valori dell'asse Y. Per default, l'intervallo viene calcolato automaticamente in base ai dati del widget. Il valore di questa proprietà viene ignorato se i dati del grafico contengono un valore maggiore. | NUMBER | Automatico | Y | N | ||
YAxisMinimumValues | Imposta l'intervallo minimo per i valori dell'asse Y. Per default, l'intervallo viene calcolato automaticamente in base ai dati del widget. Il valore di questa proprietà viene ignorato se i dati del grafico contengono un valore inferiore. | NUMBER | Automatico | Y | N |