Questo oggetto è la superclasse per i wigdet misuratore analogico e grafico a barre. Tale oggetto fornisce l'intera funzionalità comune tra questi due widget, che include il tracciamento della superficie di base, la gestione della maggior parte di eventi del mouse e così via. Sono disponibili le seguenti funzioni e variabili comuni:
Variabili di oggetti | ||
---|---|---|
Number | gaugeWidth | La larghezza della superficie da creare sulla pagina. Espressa in pixel. |
Number | gaugeHeight | L'altezza della superficie da creare sulla pagina. Espressa in pixel. |
Stringa|Oggetto | gaugeBackground | Il colore da applicare allo sfondo del misuratore. Generalmente, un colore in stile CSS, ad esempio #e0e0e0. Utilizzare questo colore per l'oggetto riempimento. Consultare l'esempio. |
Number | gaugeMin | Il valore minimo da visualizzare sul misuratore. |
Number | gaugeMax | Il valore massimo da visualizzare sul misuratore. |
Stringa | image | Un URL da utilizzare come background per il misuratore. |
Number | imageX | La posizione x in cui inserire l'immagine. Il valore predefinito è 0, che specifica la posizione dell'angolo inferiore sinistro. |
Number | imageY | La posizione y in cui inserire l'immagine. Il valore predefinito è 0, che specifica la posizione dell'angolo inferiore sinistro. |
Number | imageWidth | La larghezza dell'immagine indicata precedentemente. Se viene utilizzata un'immagine, quindi è necessario specificare questo valore per l'immagine da visualizzare. |
Number | imageHeight | L'altezza dell'immagine indicata precedentemente. Se viene utilizzata un'immagine, quindi è necessario specificare questo valore per l'immagine da visualizzare. |
Boolean | imageOverlay | Se l'immagine citata precedentemente è una sovrapposizione, anziché un background. |
Number | useRangeStyles | Se utilizzare gli stili CSS per indicare i colori dell'intervallo. |
Boolean | hideValues | Se nascondere le caselle di testo sottostanti al misuratore e mostrare il valore degli indicatori. |
In modo dichiarativo, nella markup, questa variabile può essere impostata come stringa, che è generalmente una stringa di colore in stile CSS, ad esempio grigio o #e0e0e0. Tuttavia, in JavaScript, la variabile gaugeBackground può essere impostata su un oggetto di riempimento, ad esempio dojox.gfx riempie la definizione oggetto. L'oggetto di riempimento lineare prevede le seguenti condizioni:
{ type: "linear", x1: 0, // posizione x per iniziare il primo colore y1: 0, // posizione y per iniziare il primo colore x2: 100, // posizione x per terminare il secondo colore y2: 100, // posizione x per terminare il secondo colore colors: [{offset: 0, color: "black"}, // il primo colore {offset: 1, color: "white"}] // il secondo colore }Per impostare il gradiente da grigio a bianco, dalla fine di un misuratore all'inizio, è possibile immettere il seguente codice:
var gauge = dijit.byId("testGauge"); var fill = new Object(); fill.type = "linear"; fill.x1 = 0; fill.x2 = 0; fill.y2 = 0; fill.y1 = gauge.gaugeHeight; fill.colors = [{offset: 0, color: "#ECECEC"}, {offset: 1, color: "white"}]; gauge.gaugeBackground = fill;
Questo valore predefinito di variabile è 0, il che indica che vengono utilizzati i colori dell'intervallo incorporato. Se, tuttavia, è impostato su un valore maggiore di 0, per impostare lo stile degli intervalli viene utilizzato tale numero di classi CSS, ossia ibmGaugeRange1, ibmGaugeRange2 e così via. Questa funzione non è abilitata in Internet Explorer. La classe CSS dispone di proprietà come nel seguente esempio:
.ibmGaugeRange1 { fill: #808080 ; stroke: #808080 ; }Come mostrato, questi sono stili SVG (Scalable Vector Graphics), non HTML. Gli attributi come ad esempio il colore in background non hanno alcun effetto.
Per impostazione predefinita, la variabile hideValues è impostata su false, il che significa che, per ogni indicatore aggiunto al misuratore, viene visualizzata una casella di testo sotto alla superficie del misuratore, in cui viene mostrato il valore di tale indicatore come valore di testo. Questa funzione è riservata per scopi di accesso facilitato e l'impostazione di tale variabile su true rende questo misuratore *inaccessibile*. Questa è una considerazione importante da tenere presente, poiché, se tali caselle di testo sono disabilitate, è possibile che alcuni lettori non sappiano come accedere ai valori dei misuratori.
Funzioni di oggetti | |
---|---|
void | addRange(Object range) Aggiunge un intervallo a questo widget misuratore. |
void | addRanges(Array ranges) Aggiunge una raccolta di oggetti di intervallo a questo misuratore. |
void | moveIndicatorToFront(Object indicator) Sposta l'indicatore fornito all'inizio del misuratore. |
void | drawText(String txt, Number x, Number y, String align, String vAlign) Traccia un testo sul misuratore. |
void | removeText(String t) Rimuove il testo fornito dal misuratore. |
void | updateTooltip(String text) Aggiorna l'aiuto a comparsa per il misuratore con il testo fornito. |
void | handleMouseOver (Object event) Supporto mouse. |
void | handleMouseOut(Object event) Supporto mouse. |
void | handleMouseDown(Object event) Supporto mouse. |
void | handleMouseUp(Object event) Supporto mouse. |
void | handleMouseMove(Object event) Supporto mouse. |
Dettagli di funzioni |
---|
var gauge = new ibm_gauge.widget.AnalogGauge(); gauge.addRange({low:10, high:20, hover:'10 - 20'});
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.addRanges([{low:10, high:20, hover:'10 - 20'},{low:20, high:30, hover:'20 - 30'}]);
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Sample text", 100, 50, 'right');
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.drawText("Sample text", 100, 50, 'right'); gauge.removeText("Sample text");
var gauge = new ibm_gauge.widget.AnalogGauge({}); gauge.updateTooltip("Text to put in tooltip!");
I seguenti widget (Range, Gradient, GradientColor e Indicator) vengono utilizzati principalmente per creare un misuratore in modo dichiarativo, nella markup o anziché utilizzare un oggetto anonimo per le altre funzioni del misuratore.
Variabili di oggetti | ||
---|---|---|
Number | low | Il valore minimo o massimo di questo intervallo. |
Number | high | Il valore alto o massimo di questo intervallo. |
Stringa | hover | Il testo da inserire nell'aiuto a comparsa quando si passa il mouse su questo intervallo. |
Stringa|Oggetto | color | Il colore di questo intervallo. Può essere anche un oggetto ibm_gauge.widget.Gradient. |
Number | size | Per un misuratore circolare, ad esempio AnalogGauge, questo valore indica la dimensione dell'arco. |
Variabili di oggetti | ||
---|---|---|
Stringa | tipo | Il tipo di gradiente. Per dettagli sui tipi disponibili, consultare dojox.gfx.*. |
Number | x1 | La coordinata x del contesto in cui il primo colore viene utilizzato di più. |
Number | x2 | La coordinata x del contesto in cui il secondo colore viene utilizzato di più. |
Number | y1 | La coordinata y del contesto in cui il primo colore viene utilizzato di più. |
Number | y2 | La coordinata y del contesto in cui il secondo colore viene utilizzato di più. |
Array | colors | I due colori da utilizzare per questo gradiente. Tali colori sono generalmente un oggetto ibm_gauge.widget.GradientColor o un oggetto anonimo con proprietà comparabili. |
Funzioni di oggetti | |
---|---|
Object | getFillObject() Richiama questo widget come oggetto di riempimento anonimo. |
Dettagli di funzioni |
---|
Variabili di oggetti | ||
---|---|---|
Number | offset | L'offset di questo colore, che può essere 0 o 1. |
Stringa | color | Il colore da utilizzare. Generalmente è un colore in stile CSS, ad esempio bianco or #000000. |
Funzioni di oggetti | |
---|---|
Object | getColorObject() Richiama questo widget come oggetto di colore anonimo. |
Dettagli di funzioni |
---|
Variabili di oggetti | ||
---|---|---|
Number | value | Il valore sul misuratore rappresentato da questo indicatore. |
Stringa | tipo | Il tipo di indicatore. I possibili esempi includono line, arrow e bar. I possibili valori dipendono dal tipo di misuratore. |
Stringa | color | Il colore di questo indicatore. Generalmente, un colore in stile CSS. |
Stringa | etichetta | L'etichetta per questo indicatore. |
Number | length | La lunghezza dell'indicatore. |
Number | width | La larghezza o spessore dell'indicatore. |
Number | offset | L'offset dell'indicatore. |
Stringa | hover | Il testo da inserire nell'aiuto a comparsa quando si passa il mouse su questo indicatore. |
Stringa|Funzione | onDragMove | La funzione da richiamare quando l'indicatore viene spostato con un'azione di trascinamento. Questo valore può essere un nome funzione o la funzione stessa. |
Il widget del misuratore analogico fornisce un misuratore grafico circolare per indicare valori numerici, in modo simile ad un tachimetro o ad un manometro. Questo misuratore può avere valori angolari iniziali e finali, fornendo misuratori in qualsiasi numero di forme circolari, inclusi cerchi, semicerchi e archi. Il misuratore analogico estende la superclasse _Gauge, ereditando tutte le relative variabili, proprietà e funzioni.
Variabili di oggetti | ||
---|---|---|
Number | gaugeWidth | Sovrascrive la proprietà _Gauge con lo stesso nome. Questa variabile indica la larghezza del misuratore e imposta il valore predefinito su 300 pixel. |
Number | gaugeHeight | Sovrascrive la proprietà _Gauge con lo stesso nome. Questa variabile indica l'altezza del misuratore e imposta il valore predefinito su 200 pixel. |
Number | cx | La coordinata x del centro del misuratore, all'interno dell'area di superficie prescritta. Il valore predefinito è gaugeWidth/2. |
Number | cy | La coordinata y del centro del misuratore, all'interno dell'area di superficie prescritta. Il valore predefinito è gaugeHeight/2. |
Number | radius | Il raggio del misuratore. Il valore predefinito è il valore inferiore tra i valori cx-25 e cy-25. |
Number | startAngle | Indica l'angolo, in gradi, in cui inizia il misuratore. Il valore predefinito è -90. |
Number | endAngle | Indica l'angolo, in gradi, in cui termina il misuratore. Il valore predefinito è -90. |
Funzioni di oggetti | |
---|---|
void | addIndicator(Object indicator) Aggiunge l'indicatore fornito a questo misuratore. |
Number | getAngle(Number value) Considerando il valore numerico indicato sul misuratore, richiama l'angolo che corrisponde a tale valore. |
Number | getValueForAngle(Number angle) Considerato un angolo, richiama il valore a cui corrisponde l'angolo. |
Number | getRadians(Number angle) Esegue la conversione da gradi a radianti. |
Number | getDegrees(Number radians) Esegue la conversione da radianti a gradi. |
void | draw() Traccia il misuratore per la prima volta e per le volte successive. |
void | drawRange(Object range) Traccia l'intervallo fornito su questo misuratore. |
void | drawIndicator(Object indicator) Traccia l'indicatore fornito su questo misuratore. |
void | moveIndicator(Object indicator) Sposta l'indicatore fornito su questo misuratore. |
Object | getRangeUnderMouse(Object event) Determina l'intervallo attuale in cui passa il cursore del mouse. |
Dettagli di funzioni |
---|
Il widget del grafico a barre fornisce una vista grafica per i dati numerici sotto forma di un singolo grafico a barre orizzontale di colonne. Il grafico a barre può contenere un numero indefinito di barre orizzontali sulla stessa colonna, indicatori di destinazione e segni di spunta. Il widget del grafico a barre estende la superclasse _Gauge, ereditando tutte le relative variabili, proprietà e funzioni.
Variabili di oggetti | ||
---|---|---|
Number | gaugeWidth | Sovrascrive la proprietà _Gauge con lo stesso nome. Questa variabile indica la larghezza del misuratore e imposta il valore predefinito su 250 pixel. |
Number | gaugeHeight | Sovrascrive la proprietà _Gauge con lo stesso nome. Questa variabile indica l'altezza del misuratore e imposta il valore predefinito su 35 pixel. |
Number | dataX | La coordinata x, in pixel, in cui inizia l'area di dati. Il valore predefinito è 5. |
Number | dataY | La coordinata y del contesto in cui deve iniziare l'area di dati, in pixel. Il valore predefinito è 5. |
Number | dataWidth | Larghezza, in pixel, dell'area di dati. Il valore predefinito è gaugeWidth-10. |
Number | dataHeight | Altezza, in pixel, dell'area di dati. Il valore predefinito è gaugeHeight-10. |
Funzioni di oggetti | |
---|---|
void | addIndicator(Object indicator) Aggiunge l'indicatore fornito a questo grafico a barre. |
Number | getPosition(Number value) Richiama la posizione di coordinate che rappresenta un valore fornito. |
Number | getValueForPosition(Number position) Richiama il valore per la posizione di coordinate fornita. |
void | draw() Traccia il grafico a barre per la prima volta e per le volte successive. |
void | drawRange(Object range) Traccia l'intervallo fornito su questo grafico a barre. |
void | drawIndicator(Object indicator) Traccia l'indicatore fornito su questo grafico a barre. |
void | moveIndicator(Object indicator) Sposta l'indicatore fornito su questo grafico a barre. |
void | resizeIndicator(Object indicator) Ridimensiona l'indicatore fornito su questo grafico a barre. |
Object | getRangeUnderMouse(Object event) Determina l'intervallo in cui passa il cursore del mouse. |
Dettagli di funzioni |
---|