Widget Grafico combinato (con tema applicabile)
Panoramica
Il widget Grafico combinato consente di rappresentare serie di dati sul grafico utilizzando più tipi di indicatore, ad esempio colonne, linee, aree e punti. È possibile sovrapporre più insiemi di dati utilizzando diversi tipi di visualizzazione per confrontare le quantità di unità in più serie di dati. L'asse Y rappresenta la quantità e l'asse X rappresenta la categoria. La visualizzazione dei dati utilizzando diversi tipi di visualizzazione del grafico semplifica la lettura delle diverse scale per gli assi Y.
Di seguito sono riportate alcune delle configurazioni principali disponibili per il grafico combinato.
• Visualizzare serie di dati utilizzando linee, colonne, aree e punti.
• Associare dati di più origini.
• Configurare l'ordine di impilamento ZIndex delle serie di dati.
• Applicare la formattazione dello stato per definire lo stile del grafico in base ai valori.
• Raggruppare e impilare serie di dati.
Best practice
• Mantenere attivato il campionamento dei dati per migliorare le prestazioni del grafico in fase di esecuzione. La disattivazione del campionamento dei dati può rallentare le prestazioni quando il grafico visualizza migliaia di punti dati da più serie. Disattivare il campionamento solo quando l'insieme di dati del grafico è ridotto.
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'} | value2:{name:'value2',baseType:'NUMBER'} | ||
Utilizzo | Definisce i valori dell'asse X. I dati devono avere un tipo di base STRING, NUMBER o DATETIME. 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 o DATETIME
| NUMBER | NUMBER | ||
Esempio di riga | x: 'Apple' - dove Apple è un nome di 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 serie di dati N. |
Nell'immagine seguente viene illustrato un esempio di dati restituiti da un'infotable con quattro definizioni di campo per l'asse Y:
Proprietà del widget
Le proprietà del widget Grafico combinato sono elencate di seguito.
Nome proprietà | Descrizione | Tipo di base | Valore di default | Associabile? (Y/N) | Localizzabile? (Y/N) |
|---|---|---|---|---|---|
AlignBarsAtZero | Allinea a zero le barre di tutti gli assi Y del grafico. | BOOLEAN | False | Y | N |
AxisDisplayControl | Aggiunge un menu di configurazione alla barra degli strumenti del grafico che consente di controllare la visibilità degli assi Y in fase di esecuzione. | BOOLEAN | False | Y | N |
ChartType | Imposta il tipo di visualizzazione di default utilizzato per visualizzare i dati della serie nel grafico. È possibile sostituire manualmente questa selezione per ogni serie di dati utilizzando la proprietà SeriesNType. | STRING | Linea | N | N |
CustomClass | Specifica la classe CSS personalizzata da applicare al widget. È possibile immettere più classi, separate da uno spazio. | STRING | N/D | Y | N |
Data | Origine dati dell'infotable per il grafico. | Infotable | N/D | Y | N |
DataFieldN | Specifica il campo della infotable da utilizzare per la serie di dati N. | Infotable | N/D | N | N |
DataLabelN | Etichetta da visualizzare nell'area delle legende per la serie di dati N. | STRING | N/D | Y | Y |
DataPointSelection | Specifica il punto dati da selezionare rispetto alla posizione del puntatore. È possibile impostare la proprietà in modo da selezionare il punto dati più vicino sull'asse verticale, sull'asse orizzontale o su entrambi gli assi. Opzioni: • Nessuno • Posizione puntatore • Orizzontale più vicino • Verticale più vicino • Entrambi gli assi | STRING | N/D | Y | N |
DataSeriesStyleN | Consente di applicare la formattazione dello stato per la serie di dati N nel grafico. È possibile applicare lo stile alle serie in base ai valori dei dati per individuare più facilmente i trend e gli schemi. | Formattazione stato | N/D | N | N |
DirectSelectionZoom | Consente di eseguire lo zoom avanti selezionando due elementi di dati nel grafico. Le opzioni disponibili per questa proprietà sono Asse orizzontale, Asse verticale, Entrambi e Nessuno. Questa proprietà viene visualizzata nell'elenco delle proprietà quando si seleziona HorizontalZoom o VerticalZoom. | 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 per questa proprietà sono Asse orizzontale, Asse verticale, Entrambi e Nessuno. Questa proprietà viene visualizzata nell'elenco delle proprietà quando si seleziona HorizontalZoom o VerticalZoom. | STRING | Nessuno | Y | N |
Disabled | Disattiva il widget nel mashup. | BOOLEAN | N/D | Y | N |
DisplaySeriesNOn | Imposta l'asse Y o il gruppo in pila della serie di dati N. | STRING | N | N | |
EmptyChartIcon | Specifica l'icona da visualizzare quando il grafico è vuoto. | MEDIA | not visible | N | N |
EmptyChartLabel | Specifica il testo da visualizzare quando l'infotable associata non contiene dati. | STRING | [[ChartStateLabelEmpty]] | N | Y |
ErrorStateIcon | Specifica l'icona da visualizzare quando non è possibile caricare i dati del grafico. | MEDIA | error | N | N |
ErrorStateLabel | Specifica il testo da visualizzare quando non è possibile caricare i dati del grafico. | STRING | [[ChartStateLabelError]] | N | N |
ExternalPadding | Imposta la spaziatura interna rispetto agli assi. Il valore della spaziatura interna è una percentuale della larghezza della barra. | NUMBER | 25 | Y | N |
GroupPadding | Imposta la spaziatura interna tra le serie. Il valore della 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. | BOOLEAN | False | Y | N |
HideNotes | Nasconde l'area delle note. | BOOLEAN | False | Y | N |
HideValues | Nasconde le etichette dei valori sul grafico. | BOOLEAN | False | Y | N |
HideXAxis | Nasconde l'asse X. | BOOLEAN | False | Y | N |
HideYAxisN | Nasconde l'asse Y per la serie di dati N. | BOOLEAN | False | Y | N |
HorizontalAxisLabelsRotation | Immettere un valore compreso tra -180 e 180 per impostare l'angolo di rotazione delle etichette sull'asse orizzontale. | NUMBER | Calcolato automaticamente | N | N |
HorizontalAxisMaxHeight | Imposta un'altezza massima per l'asse orizzontale. | NUMBER | 85 | Y | N |
HorizontalZoom | Consente di eseguire lo zoom avanti o indietro sull'asse orizzontale. Quando si seleziona questa proprietà, vengono visualizzate le proprietà HorizontalIntervalControl, HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom e DragSelectionZoom nell'elenco delle proprietà. | BOOLEAN | False | Y | N |
HorizontalIntervalControl | Aggiunge i controlli che consentono di eseguire lo zoom avanti sull'asse orizzontale in base a intervalli specifici. Le opzioni disponibili sono Nessuno, ovvero la selezione di default, ed Elenco a discesa. Quando si seleziona Elenco a discesa, vengono visualizzate le proprietà HorizontalIntervalControlLabel e HorizontalIntervalData nell'elenco delle proprietà. | STRING | Nessuno | N | N |
HorizontalIntervalControlLabel | Specifica l'etichetta di testo dei controlli di zoom dell'intervallo per l'asse orizzontale. | STRING | n/d | Y | Y |
HorizontalIntervalData | L'origine dati per le opzioni di controllo dello zoom dell'intervallo. Quando si seleziona una voce dell'elenco a discesa dell'intervallo orizzontale, viene eseguito lo zoom avanti del grafico in base al valore di durata e al punto di ancoraggio iniziale o finale selezionati. | INFOTABLE | n/d | Y | N |
HorizontalIntervalAnchorPoint | 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. Questa proprietà viene visualizzata quando si seleziona la proprietà ShowHorizontalAnchorPointControl. | STRING | Inizio | Y | N |
HorizontalIntervalAnchorPointLabel | Specifica l'etichetta per il punto di ancoraggio dell'intervallo per l'asse orizzontale. Questa proprietà viene visualizzata quando si seleziona la proprietà ShowHorizontalAnchorPointControl. | STRING | n/d | Y | Y |
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 |
HorizontalRangeZoomDateFormat | Imposta il formato della data all'interno della casella di selezione della data quando si utilizza lo zoom di selezione di un intervallo. I formati supportati sono basati sulla libreria JavaScript Moment.js ed eseguono la distinzione tra maiuscole e minuscole. | STRING | n/d | N | N |
HorizontalRangeZoomDateWidth | Imposta la larghezza della casella di selezione della data sull'asse orizzontale quando lo zoom è attivato. | NUMBER | 332px | N | 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à HorizontalSliderZoomMaxLabel e HorizontalSliderZoomMinLabel nell'elenco delle proprietà. | BOOLEAN | False | Y | N |
HorizontalSliderZoomMaxLabel | Specifica l'etichetta per il valore massimo del controllo di zoom del dispositivo di scorrimento. | STRING | n/d | Y | Y |
HorizontalSliderZoomMinLabel | Specifica l'etichetta per il valore minimo del controllo di zoom del dispositivo di scorrimento. | STRING | n/d | Y | Y |
InternalPadding | Imposta la spaziatura interna tra le serie. Il valore della spaziatura interna è una percentuale della larghezza della barra. | NUMBER | 25 | Y | N |
Label | Specifica l'etichetta di testo da visualizzare per il grafico combinato. | STRING | [[ComboChart]] | Y | Y |
LabelReset | Imposta l'etichetta visualizzata nel pulsante Reimposta sulla barra degli strumenti del grafico. | STRING | Reimposta | Y | Y |
LabelAlignment | Allinea il testo dell'etichetta del widget. Opzioni: Nessuno, A sinistra, Al centro, A destra. | STRING | A sinistra | N | N |
LabelPosition | Imposta la posizione dell'etichetta di testo. Opzioni: Nessuna, In alto, In basso, A sinistra. | STRING | In alto | N | N |
LabelType | Imposta il tipo di etichetta del grafico combinato, ad esempio Intestazione, Sottointestazione, Etichetta o Corpo. | STRING | Sottointestazione | Y | N |
LegendAlignment | Allinea la legenda del grafico. | STRING | A sinistra | N | N |
LegendFilter | Aggiunge le caselle di controllo accanto alle serie di dati nella legenda che controllano la visibilità delle serie di dati. | BOOLEAN | False | N | N |
LegendMaxWidth | Imposta una larghezza massima per l'area della legenda. | NUMBER | 736 | Y | N |
LegendPosition | Imposta la posizione della legenda del grafico. Opzioni: Nessuna, A sinistra, Al centro, A destra. | STRING | A sinistra | N | N |
LoadingIcon | Specifica l'icona da visualizzare durante il caricamento dei dati del grafico. | STRING | chart_loading_combo_pareto | N | N |
Margin | Questa proprietà è disattivata. È necessario definire i margini di questo widget dinamico nel relativo contenitore. | STRING | 5 | N | N |
MarkerShape | Imposta la forma dell'indicatore dei punti dati sul grafico. Opzioni: Nessuna, Cerchio, Quadrato, Rombo. | STRING | Cerchio | N | N |
MultipleDataSources | Consente di visualizzare i dati di più origini nel grafico. | BOOLEAN | False | N | |
NoDataSourceIcon | Specifica l'icona da visualizzare quando il grafico non è associato a un'origine dati. | Entità multimediali | bind | N | N |
NoDataSourceLabel | Specifica il testo da visualizzare quando il grafico non è associato a un'origine dati. | STRING | [[ChartStateLabelNoData]] | N | Y |
Notes | Specifica il testo da visualizzare 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. | STRING | A sinistra | N | N |
NotesPosition | Imposta la posizione dell'area delle note. | STRING | In basso | N | N |
NumberOfReferenceLines | Imposta il numero di linee di riferimento da visualizzare nel grafico. Le linee di riferimento vengono utilizzate per evidenziare i dati del grafico rispetto a un valore specifico. È possibile aggiungere fino a 24 linee e configurare l'etichetta, l'asse e il valore di ogni riga. | NUMBER | 0 | N | N |
NumberOfSeries | Imposta il numero di serie di dati da visualizzare sul grafico. | NUMBER | 8 | N | N |
NumberOfStacks | Imposta il numero delle pile di serie di dati da visualizzare sul grafico. | NUMBER | 0 | N | N |
NumberOfXLabels | Imposta il numero di etichette sull'asse X. | NUMBER | Automatico | Y | N |
NumberOfYaxes | Imposta il numero di assi Y da visualizzare sul grafico. | NUMBER | 1 | N | N |
PointerType | Specifica l'aspetto del puntatore al passaggio del mouse sul grafico. È possibile utilizzare le linee guida per tenere traccia di un valore di dati relativo a un asse. Opzioni: Nessuno, Standard, Linea orizzontale, Linea verticale, Mirino. | STRING | Standard | Y | N |
ReferecneLineNLabel | Imposta l'etichetta di testo della linea di riferimento. | STRING | Y | Y | Y |
ReferecneLineNValue | Imposta il valore numerico della linea di riferimento. | NUMBER | Y | N | Y |
ReferenceLineNAxis | Specifica l'asse da utilizzare per la linea di riferimento. | STRING | N | N | N |
ResetToDefaultValue | Ripristina i valori di default degli input di questo widget. | Servizio | N/D | Y | N |
ReverseXAxis | Visualizza i valori dell'asse X in ordine inverso. | BOOLEAN | False | N | N |
ReverseYAxis | Inverte l'ordine dei valori sull'asse Y. | 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 |
SampleSize | Imposta il numero massimo di punti dati da visualizzare durante la visualizzazione di insiemi di dati di grandi dimensioni sul grafico. Per disattivare il campionamento, impostare questa proprietà su 0. | NUMBER | Automatico | Y | N |
SelectedData | Infotable contenente i dati selezionati nel grafico. | INFOTABLE | N/D | Y | N |
SelectedSeriesChanged | Evento che viene attivato quando si cambia la serie selezionata. | Evento | N/D | Y | N |
SelectionMode | Controlla il numero di punti dati che un utente può selezionare contemporaneamente. Scegliere Più di uno per consentire a un utente di selezionare più punti dati. Opzioni: Nessuno, Default, Uno, Più di uno. | STRING | Default | Y | N |
Series1MarkerShape | Imposta la forma dell'indicatore dei punti dati della serie 1 sul grafico. | STRING | Default | N | N |
Series1MarkerSize | Imposta la dimensione dell'indicatore della serie di dati 1. | NUMBER | 8 | Y | N |
Series1Type | Imposta il tipo di visualizzazione utilizzato per visualizzare i dati della serie 1 nel grafico. | STRING | Default | N | N |
Series1ZAxis | Imposta l'ordine delle serie sull'asse Z. Per default, tutti i gruppi sono impostati sullo stesso valore dell'asse Z. I gruppi in pila sono organizzati in base al tipo di serie seguito da questa proprietà. | NUMBER | 0 | N | N |
SeriesClicked | Attiva un evento quando si fa clic su un punto dati sul grafico. | Evento | N/D | Y | N |
ShowChartBands | Evidenzia lo spazio riservato per le categorie delle barre nel grafico. Se impostata su true, l'area di ogni categoria viene ombreggiata con un colore grigio. | BOOLEAN | False | N | N |
ShowDataLoading | Mostra un'icona che ruota durante il caricamento dei dati. | BOOLEAN | True | N | N |
ShowHideLegend | Aggiunge un pulsante Mostra o Nascondi che consente di mostrare o nascondere la legenda del grafico in fase di esecuzione. | BOOLEAN | False | N | N |
ShowHorizontalAnchorPointControl | Aggiunge i controlli per regolare il valore di ancoraggio per l'asse orizzontale. Quando si seleziona questa proprietà, vengono visualizzate le proprietà HorizontalIntervalAnchorPoint e HorizontalIntervalAnchorPointLabel nell'elenco delle proprietà. | BOOLEAN | False | Y | N |
ShowXAxis | Mostra il righello dell'asse X. | BOOLEAN | False | Y | N |
ShowYAxis | Mostra il righello dell'asse Y. | 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 |
ShowZeroValueRuler | Mostra il righello di valore zero. | BOOLEAN | False | Y | N |
SparkView | Mostra una vista semplificata del grafico. Attivare questa proprietà per nascondere etichette, legende e 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 il tasto TAB. | NUMBER | 0 | N | N |
ValuesPosition | Imposta la posizione delle etichette dei valori dei dati relative ai punti dati. | STRING | Sopra | N | N |
ValuesPositionBar | Imposta la posizione delle etichette dei valori dei dati relative alle barre del grafico. | STRING | Fuori dalla barra | N | N |
ValuesTooltip | STRING | Y | Y | ||
VerticalAxisMaxWidth | Imposta una larghezza massima per l'asse verticale. | NUMBER | 85 | Y | N |
VerticalZoom | Consente di eseguire lo zoom avanti o indietro sull'asse verticale. | BOOLEAN | False | Y | N |
VerticalSliderZoom | Aggiunge un controllo del dispositivo di scorrimento che consente di visualizzare i dati tra un valore minimo e un valore massimo sull'asse verticale. Quando si seleziona questa proprietà, vengono visualizzate le proprietà VerticalZoomMaxLabel e VerticalZoomMinLabel nell'elenco delle proprietà. | BOOLEAN | False | Y | N |
VerticalZoomMaxLabel | Specifica l'etichetta di testo per il valore massimo del controllo di zoom del dispositivo di scorrimento. | STRING | N/D | Y | Y |
VerticalZoomMinLabel | Specifica l'etichetta di testo per il valore minimo del controllo di zoom del dispositivo di scorrimento. | STRING | N/D | Y | Y |
Visible | Se la proprietà è attivata, il widget è visibile nel mashup. | BOOLEAN | True | Y | N |
XAxisField | Selezionare il campo della infotable contenente i dati dell'asse X. | INFOTABLE | N/D | N | N |
XAxisLabel | Specifica l'etichetta di testo dell'asse X. | STRING | [[XAxis]] | Y | Y |
XAxisLabelAlignment | Allinea l'etichetta dell'asse X. | STRING | A sinistra | N | N |
XAxisType | Imposta il tipo di formato dei valori dell'asse X. | STRING | Stringa | Y | N |
YAxesMaxWidth | Imposta una larghezza massima per l'area degli assi Y. Quando l'area supera la larghezza massima, viene visualizzata una barra di scorrimento. | NUMBER | 1200 | Y | N |
YAxisNFormat | Imposta il formato per i valori dell'asse Y N. | STRING | 0000,0 | Y | N |
YAxisNLabel | Specifica l'etichetta di testo dell'asse Y N. | STRING | [[YAxis]] | Y | Y |
YAxisNLabelAlignment | Allinea l'etichetta dell'asse Y N. | STRING | In mezzo | N | N |
YAxisNMaximumValue | Imposta il valore massimo per l'intervallo dell'asse Y. Per default, l'intervallo viene calcolato automaticamente in base ai dati del widget. | NUMBER | Automatico | Y | N |
YAxisNMinimumValue | Imposta il valore minimo per l'intervallo dell'asse Y. Per default, l'intervallo viene calcolato automaticamente in base ai dati del widget. | NUMBER | Automatico | Y | N |
YAxisNNumberOfLabels | Imposta il numero di etichette dell'asse Y N. | NUMBER | Automatico | Y | N |
YAxisNPosition | Specifica la posizione dell'asse Y. Con l'impostazione Automatico, il primo asse Y viene visualizzato come principale e il resto come secondario. | STRING | Automatico | N | N |
YAxisNValuesFormat | Imposta il formato per le etichette dei valori sull'asse Y N. Questa proprietà è disponibile quando HideValues è impostata su False. | STRING | Y | N | |
ZeroValueRuler | Controlla la visibilità dei righelli di valore zero sul grafico. È possibile visualizzare il righello solo per l'asse Y principale o secondario. Opzioni: Asse principale, Asse secondario, Nessuno, Entrambi. | STRING | Nessuno | Y | N |