Mashup Builder > Widget > Widget standard > Widget Diagramma di pianificazione (con tema applicabile)
Widget Diagramma di pianificazione (con tema applicabile)
Introduzione
Il widget Diagramma di pianificazione consente di visualizzare un diagramma di pianificazione nel mashup.
* 
Il widget Diagramma di pianificazione è disponibile come widget standard nella piattaforma e come componente Web che può essere importato da un SDK.
Formato dati
I dati del Diagramma di pianificazione devono includere un'infotable con due definizioni di campo.
Risorse: definisce le risorse da visualizzare sull'asse delle risorse.
Dati: definisce le infotable annidate con i dati da visualizzare per ciascuna risorsa.
Risorsa
Infotable dati
Definizione di campo
Resource:{name:'Resource',baseType:'STRING'}
Data:{name:'Data',baseType:'INFOTABLE'}
Utilizzo
Definisce i valori dell'asse X per la barra o la colonna del diagramma. I dati devono essere in formato stringa. Ogni riga viene visualizzata come categoria sull'asse X. Il nome definito per questa colonna è l'opzione da selezionare per la proprietà del widget ResouceField.
Definisce l'infotable con i dati per la risorsa.
Tipo di base
STRING
INFOTABLE
Esempio di riga
Resource:'Apple' - dove Apple è il nome della risorsa.
Data:'Infotable1' - L'entità infotable con i dati della risorsa.
Per ciascuna risorsa definita nella prima infotable è necessario creare un'infotable con definizioni di campo che rappresentano la struttura dati per la risorsa nel diagramma. Nella tabella seguente sono elencate la struttura dati necessaria e le definizioni di campo da utilizzare per l'infotable dei dati:
reason
info
start
end
color
Definizione di campo
reason:{name:'reason',baseType:'STRING'}
info:{name:'info',baseType:'STRING'}
start:{name:'start',baseType:'DATETIME'}
end:{name:'end',baseType:'DATETIME'}
color:{name:'color',baseType:'STRING'}
Utilizzo
Campo obbligatorio che definisce il nome del task o il motivo della registrazione dell'evento della risorsa. I dati di questa colonna vengono visualizzati come legende del diagramma.
Campo facoltativo che definisce la descrizione dell'evento della risorsa.
Campo obbligatorio che definisce la data di inizio dell'evento della risorsa.
Campo obbligatorio che definisce la data di fine dell'evento della risorsa.
Campo facoltativo che definisce un colore specifico per la rappresentazione dell'evento nel diagramma.
Tipo di base
STRING
STRING
DATETIME
DATETIME
STRING
Esempio di riga
reason:'Maintenance' - dove Maintenance è il nome dell'evento che si desidera visualizzare nel diagramma.
info:'Maintenance event description' - dove Maintenance event description è la descrizione dell'evento da visualizzare nel diagramma.
start:'2020-01-07 03:57:43.322' - La data d'inizio dell'evento di manutenzione.
end:'2020-01-26 07:38:12.102' - La data di fine dell'evento di manutenzione.
color:'red' - L'evento viene visualizzato con il colore rosso.
* 
Le definizioni di campo dell'infotable devono coincidere con i nomi specificati nella tabella precedente.
Ogni riga rappresenta l'ora o la durata di un evento o di un task all'interno della risorsa. Nell'immagine riportata di seguito viene illustrato il formato dei dati restituiti di un servizio dati per il diagramma di pianificazione.
Per le opzioni dei controlli di zoom dell'intervallo è necessario creare un'infotable costituita da due campi: etichetta e durata. Il tipo di base dei dati nei due campi deve essere STRING. Nell'immagine seguente è mostrato il formato dei dati restituiti di un servizio dati:
Di seguito sono riportati i valori che è possibile utilizzare nel campo duratione l'intervallo che questi rappresentano:
Y - anno
M - mese
W - settimana
d - giorno
h - ora
m - minuto
s - secondo
ms - millisecondo
* 
Per i caratteri viene applicata la distinzione tra maiuscole e minuscole. Ad esempio, "M" rappresenta mese, mentre "m" rappresenta minuto.
Associazione di un'origine dati
Per visualizzare i dati nel diagramma:
1. Nel pannello Dati aggiungere un servizio dati che restituisca un'infotable con il formato di dati corretto per il widget.
2. Associare la proprietà All Data del servizio dati alla proprietà Data del diagramma.
3. Selezionare il diagramma e nel pannello Proprietà impostare le proprietà seguenti:
ResourceField - Selezionare la colonna dell'infotable da utilizzare per l'asse della risorsa.
DataField - Selezionare la colonna dell'infotable con i dati per ciascuna risorsa. Ogni campo è un'infotable contenuta.
4. Fare clic su Salva e quindi su Visualizza mashup.
I dati dell'infotable vengono visualizzati nel diagramma.
Aggiunta di un asse secondario
È possibile aggiungere un asse secondario al diagramma di pianificazione. L'asse secondario viene utilizzato per visualizzare la data in un formato o una lingua differente. Per aggiungere un asse temporale secondario al diagramma, attenersi alla procedura descritta di seguito.
1. Selezionare il diagramma e aprire il pannello Proprietà.
2. Selezionare la casella di controllo accanto alla proprietà SecondTimeAxis. Vengono elencate proprietà aggiuntive.
3. Per specificare un formato della data diverso per l'asse secondario, digitare uno schema della data per la proprietà SecondTimeAxisDateFormatToken o selezionare un token di localizzazione.
4. Fare clic su Salva e quindi su Visualizza mashup.
L'asse temporale secondario viene visualizzato in base alla data nel formato specificato.
Nella figura seguente è riportato il widget Diagramma di pianificazione con un asse secondario:
Nel diagramma sono visualizzati gli eventi per più risorse. Gli assi temporali principale e secondario vengono utilizzati per visualizzare la data usando due formati diversi. Sull'asse principale vengono visualizzati la data e il mese, mentre sull'asse secondario viene visualizzato il numero della settimana. Per visualizzare il formato della data utilizzando il numero della settimana, impostare la proprietà SecondTimeAxisDateFormatToken su w. Per ulteriori informazioni sui formati disponibili, vedere Formattazione di data e ora per i widget.
Nella tabella seguente sono elencate le proprietà che è possibile utilizzare per attivare e configurare l'asse temporale secondario:
Proprietà
Descrizione
Tipo di base
Valore di default
Associabile? (Y/N)
Supporto localizzazione
SecondTimeAxis
Aggiunge un asse temporale secondario al diagramma.
BOOLEAN
False
Y
N
SecondTimeAxisLabel
Specifica l'etichetta di testo dell'asse temporale secondario.
STRING
Asse temporale secondario
Y
Y
SecondTimeAxisLabelAlignment
Allinea l'etichetta dell'asse temporale secondario. Per default, l'etichetta viene allineata a sinistra.
STRING
A sinistra
N
N
SecondTimeAxisDateFormatToken
Consente di localizzare il formato della data utilizzando lo schema "gg-mm-aa" per l'asse temporale secondario. Per default viene usato il formato della data del sistema operativo.
STRING
N/D
Y
Y
Proprietà del widget
Le proprietà del widget Diagramma di pianificazione sono elencate di seguito:
Nome proprietà
Descrizione
Tipo di base
Valore di default
Associabile? (Y/N)
Localizzabile? (Y/N)
AxisZoom
Consente di eseguire lo zoom avanti dell'asse temporale.
Quando si seleziona questa proprietà, vengono visualizzate le proprietà DirectSelectionZoom, DragSelectionZoom, TimeAxisIntervalControl e TimeAxisRangeZoom nell'elenco delle proprietà.
BOOLEAN
False
Y
N
CustomClass
Classe CSS definita dall'utente da applicare all'elemento div superiore del widget.
È possibile inserire più classi, separate da uno spazio.
STRING
n/d
Y
N
DirectSelectionZoom
Consente di eseguire lo zoom avanti selezionando due elementi di dati nel diagramma.
Le opzioni disponibili sono Nessuno, Asse delle risorse, Asse temporale ed Entrambi.
STRING
Nessuno
Y
N
DragSelectionZoom
Consente di eseguire lo zoom avanti di una parte specifica del diagramma disegnando un riquadro di selezione intorno all'intervallo dei dati che si desidera visualizzare.
Le opzioni disponibili per l'utente sono Nessuno, Asse delle risorse, Asse temporale ed Entrambi.
STRING
Nessuno
Y
N
Data
Origine dati dell'infotable per il diagramma.
INFOTABLE
n/d
Y
N
DataField
Seleziona il campo dell'infotable contenente i dati temporali per le risorse del diagramma.
INFOTABLE
n/d
Y
N
Disabled
Disattiva il widget nel mashup.
Il widget viene visualizzato nel mashup, ma non è possibile farvi clic sopra o selezionarlo.
BOOLEAN
False
Y
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
EndTime
Imposta la data e l'ora per la fine dell'intervallo di zoom.
DATETIME
n/d
Y
N
ExternalPadding
Imposta la spaziatura interna rispetto agli assi.
La spaziatura interna è una percentuale della larghezza della barra.
NUMBER
25
Y
N
HideDataTooltips
Nasconde le descrizioni comandi visualizzate al passaggio del mouse o alla selezione di un punto dati sul grafico.
BOOLEAN
False
N
N
HideLegend
Nasconde l'area della legenda.
Quando si seleziona questa proprietà, le proprietà LegendAlignment, LegendFilter, LegendMarkerShapes, LegendMaxWidth e LegendPosition non vengono visualizzate nell'elenco delle proprietà.
BOOLEAN
False
Y
N
HideDataTooltips
Nasconde le descrizioni comandi visualizzate al passaggio del mouse o alla selezione di un punto dati sul grafico.
BOOLEAN
False
N
N
HideNotes
Nasconde l'area delle note.
Quando si seleziona questa proprietà, le proprietà Notes, NotesAlignment e NotesPosition non vengono visualizzate nell'elenco delle proprietà.
BOOLEAN
False
Y
N
HideResourcesAxis
Nasconde l'asse delle risorse.
BOOLEAN
False
Y
N
HideTimeAxis
Nasconde l'asse temporale.
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
InternalPadding
Imposta la spaziatura interna tra le serie.
La spaziatura interna è una percentuale della larghezza della barra.
NUMBER
25
Y
N
Label
Visualizza l'etichetta di testo per il diagramma di pianificazione.
STRING
Diagramma di pianificazione
Y
Y
LabelType
Seleziona il tipo di etichetta del diagramma di pianificazione come Intestazione, Sottointestazione, Etichetta o Corpo.
STRING
Sottointestazione
Y
N
LabelAlignment
Allinea l'etichetta del widget Diagramma di pianificazione A sinistra, Al centro o A destra.
Le opzioni disponibili per questa proprietà dipendono dall'impostazione della proprietà LabelPosition.
STRING
A sinistra
N
N
LabelPosition
Imposta la posizione dell'etichetta In alto o In basso.
STRING
In alto
N
N
LabelReset
Imposta l'etichetta visualizzata sul pulsante Reimposta per il controllo di zoom.
STRING
Reimposta
Y
Y
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 all'utente 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 la larghezza massima per l'area della legenda.
NUMBER
736
Y
N
LegendPosition
Imposta la posizione della legenda In alto, In basso, A sinistra o A destra.
STRING
A destra
N
N
MultipleDataSources
Consente di visualizzare i dati di più origini nel diagramma.
Quando si seleziona questa proprietà, viene visualizzata la proprietà NumberOfDataSources nell'elenco delle proprietà.
BOOLEAN
False
N
N
Notes
Specifica il testo da visualizzare all'interno dell'area delle note nel diagramma. È possibile inserire una stringa o selezionare un token di localizzazione.
STRING
n/d
Y
Y
NotesAlignment
Allinea il testo delle note A sinistra, A destra o Al centro.
Le opzioni disponibili per questa proprietà dipendono dall'impostazione della proprietà NotesPosition.
STRING
A sinistra
N
N
NotesPosition
Imposta la posizione dell'area delle note In alto o In basso.
STRING
In basso
N
N
NumberOfDataSources
Imposta il numero di origini dati che è possibile associare al diagramma.
NUMBER
2
N
N
NumberOfReferenceLines
Specifica il numero di linee di riferimento da visualizzare nel grafico. È possibile aggiungere fino a 24 linee di riferimento. Per ogni linea di riferimento vengono aggiunte altre proprietà.
NUMBER
Y
N
N
NumberOfTimeLabels
Imposta il numero di etichette da visualizzare sull'asse del tempo.
* 
Questa proprietà viene applicata anche all'asse secondario del tempo.
NUMBER
N
Y
N
ReferecneLineNLabel
Imposta l'etichetta di testo della linea di riferimento.
STRING
Y
Y
N
ReferecneLineNValue
Imposta il valore della linea di riferimento. È possibile scegliere una data per impostare la linea di riferimento.
DATETIME
Y
N
n/d
ResourcesAxisLabel
Visualizza l'etichetta di testo dell'asse delle risorse.
STRING
Asse delle risorse
Y
Y
ResourcesAxisLabelAlignment
Allinea l'etichetta dell'asse delle risorse In alto, In mezzo o In basso.
STRING
In mezzo
N
N
ReverseResourcesAxis
Visualizza i valori dell'asse delle risorse in ordine inverso.
BOOLEAN
False
N
N
ReverseTimeAxis
Visualizza i valori dell'asse temporale in ordine inverso.
BOOLEAN
False
N
N
RulersInFront
Mostra i righelli davanti ai valori dei dati. Per default, i righelli vengono visualizzati dietro i dati.
BOOLEAN
False
Y
N
SeriesClicked
Attiva un evento quando si fa clic su un punto dati.
n/d
n/d
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
ShowResourcesAxisRuler
Mostra il righello dell'asse delle risorse.
BOOLEAN
False
Y
N
ShowTimeAxisRuler
Mostra il righello dell'asse temporale.
BOOLEAN
False
Y
N
ShowZoomButtons
Mostra i pulsanti per lo zoom avanti e indietro sulla barra degli strumenti del grafico quando è attivato lo zoom.
BOOLEAN
False
N
N
SparkView
Mostra una vista semplificata della visualizzazione del diagramma. Attivare questa proprietà per nascondere le etichette, le legende e i righelli.
BOOLEAN
False
Y
N
StartTime
Imposta la data e l'ora dell'inizio dell'intervallo di zoom.
DATETIME
n/d
Y
N
TabSequence
Numero di sequenza del widget Diagramma di pianificazione quando si preme TAB.
NUMBER
n/d
N
N
TimeAxisIntervalControl
Aggiunge i controlli che consentono di eseguire lo zoom avanti sull'asse temporale in base a intervalli specifici.
La selezione di questa proprietà è Nessuno per default. Quando si seleziona Elenco a discesa, vengono visualizzate le proprietà TimeAxisIntervalControlLabel, TimeAxisIntervalData, TimeAxisIntervalAnchorPoint e TimeAxisIntervalAnchorPointLabel nell'elenco delle proprietà.
STRING
Nessuno
Y
N
TimeAxisIntervalControlLabel
Specifica l'etichetta dei controlli di zoom dell'intervallo per l'asse temporale.
STRING
n/d
Y
Y
TimeAxisIntervalData
L'origine dati per le opzioni di controllo dello zoom dell'intervallo.
Quando si seleziona una voce dell'elenco a discesa dell'intervallo, viene eseguito lo zoom avanti del diagramma·in base al valore di durata e al punto di ancoraggio iniziale o finale selezionati.
INFOTABLE
n/d
Y
N
TimeAxisIntervalAnchorPoint
Consente di selezionare la posizione di ancoraggio dell'intervallo all'interno dell'insieme di dati.
Selezionare Inizio per posizionare l'intervallo all'inizio dell'insieme di dati o Fine per posizionare l'intervallo alla fine.
Se, ad esempio, si specifica un intervallo di tre mesi in un insieme di dati di 12 mesi, è possibile selezionare Inizio per mostrare i primi 3 mesi o Fine per mostrare gli ultimi 3 mesi dell'insieme di dati.
STRING
Inizio
Y
N
TimeAxisIntervalAnchorPointLabel
Specifica l'etichetta per il punto di ancoraggio dell'intervallo per l'asse temporale.
STRING
n/d
Y
Y
TimeAxisLabelAlignment
Allinea l'etichetta dell'asse temporale A sinistra, A destra o Al centro.
STRING
A sinistra
N
N
TimeAxisLabel
Visualizza l'etichetta di testo dell'asse temporale.
STRING
Asse temporale
Y
Y
TimeAxisDateFormatToken
Localizza il formato della data utilizzando lo schema GG-MM-AA per l'asse temporale.
STRING
n/d
Y
Y
TimeAxisRangeZoom
Aggiunge controlli che consentono di specificare un intervallo di data e ora per lo zoom sull'asse temporale. È possibile impostare l'intervallo utilizzando le proprietà StartTime ed EndTime.
Quando si seleziona questa proprietà, vengono visualizzate le proprietà TimeAxisStartZoomLabel e TimeAxisEndZoomLabel nell'elenco delle proprietà.
BOOLEAN
False
Y
N
TimeAxisRangeZoomDateFormat
Localizza il formato della data all'interno della casella di selezione della data utilizzando uno schema GG-MM-AA. I formati supportati sono basati sulla libreria JavaScript Moment.js ed eseguono la distinzione tra maiuscole e minuscole.
STRING
n/d
N
N
TimeAxisRangeZoomDateWidth
Imposta la larghezza della casella di selezione della data sull'asse orizzontale quando lo zoom è attivato.
NUMBER
332px
N
N
TimeAxisStartZoomLabel
Specifica l'etichetta per l'inizio della selezione dell'intervallo.
STRING
n/d
Y
Y
TimeAxisEndZoomLabel
Specifica l'etichetta per la fine della selezione dell'intervallo.
STRING
n/d
Y
Y
VerticalAxisMaxWidth
Imposta la larghezza massima per l'asse verticale.
NUMBER
85
Y
N
È stato utile?