mousemove:'nearestNeighbor' 

x

interaction: {
 mousemove : 'tooltipdetect' 
}

dove:

'tooltipdetect'

Controlla il metodo di rilevamento tooltip per grafici ad aree, linee e dispersione. I valori validi sono:

• 'over', che vsualizza solo un tooltip quando il cursore del mouse passa direttamente sopra un punto dati. Questo è il valore predefinito.
• 'nearestNeighbor', che visualizza il tooltip per il punto dati più vicino su grafici a linee, dispersione e aree, anche quando il cursore del mouse si allontana da un punto dati.

Inizio pagina

Esempio: Abilitazione Rilevamento Tooltip più Vicino per un Grafico a Linee

La seguente richiesta genera un grafico a linee con il rilevamento di tooltip più vicino:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY  PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_JS
interaction: {
 mousemove : 'nearestNeighbor'    
},
*END
END

La seguente immagine mostra che il tooltip è visibile, anche quando il mouse non passa sopra ad un punto dati sul grafico:

annotations: [
 position: {
   x: undefined, 
   y: undefined,  
   parent: 'background'
        },
 marker: {  
   visible: true,
   color: 'red',
   size: 8,
   shape: 'circle',  
   rotation: 0,
   border: {
     width: 1,
     color: 'black',
     dash: ''
           }
        },
 label: {
    visible: false,
    text: 'Annotation Label',
    font: '10pt Sans-Serif',
    color: 'black',
    position: 'center'  
     }
 },
]

x

annotations: [
 position: {
   x: xvalue   y: yvalue,  
   parent: 'parentcomponent''
     },
 marker: {  
   visible: amboolean,
   color: amcolor,
   size: amsize,
   shape: 'amshape',  
   rotation: amrotation,
   border: {
     width: ambwidth,
     color: 'ambcolor',
     dash: 'ambdash'
         }
     },
 label: {
         visible: alboolean,
         text: 'altext',
         font: 'alfont',
         color: 'alcolor',
         position: 'alposition'  
     }
 },
   .
   .
   .
]

dove:

xvalue

La posizione orizzontale per l'indicatore di annotazione. È in grado di essere:

• Un numero. Se il componente grafico principale è 'grafico', il numero rappresenta un valore sull'asse numerico. Altrimenti, rappresenta un numero di pixel dall'angolo sinistro inferiore del componente principale.
• Una serie e gruppi di etichette per un grafico orizzontale (nel forma {serie:m,gruppo:m}), che posiziona l'annotazione di quella serie o gruppo. Questa caratteristica richiede che il componente principale sia 'grafico'.
• Una stringa percentuale (per esempio, '40%'), che posiziona l'annotazione in un punto specificato orizzontale della percentuale, dall'angolo sinistro inferiore del componente principale.
• Una stringa pixel (per esempio, '4px'), che posiziona l'annotazione in un punto orizzontale del numero di pixel, dall'angolo sinistro inferiore del componente principale.

yvalue

La posizione verticale per l'indicatore annotazione. È in grado di essere:

• Un numero. Se il componente grafico principale è 'grafico', il numero rappresenta un valore sull'asse numerico. Altrimenti, rappresenta un numero di pixel dall'angolo sinistro inferiore del componente principale.
• Una serie e gruppi di etichette per un grafico verticale (nel forma {serie:n,gruppo:m}), che posiziona l'annotazione di quella serie o gruppo. Questa caratteristica richiede che il componente principale sia 'grafico'.
• Una stringa percentuale (per esempio, '40%'), che posiziona l'annotazione in un punto specificato verticale della percentuale, dall'angolo sinistro inferiore del componente principale.
• Una stringa pixel (per esempio, '4px'), che posiziona l'annotazione in un punto verticale del numero di pixel, dall'angolo sinistro inferiore del componente principale.

'parentcomponent'

Può essere uno dei seguenti componenti del grafico:

• 'sfondo', che misura la posizione dall'angolo sinistro inferiore della cornice del grafico e posiziona l'annotazione dietro al grafico. Questo è il valore predefinito.
• 'grafico', che misura la posizione dall'angolo sinistro inferiore dell'area di traccia del grafico e posiziona l'annotazione sul grafico.
• 'legenda', che misura la posizione dall'angolo sinistro inferiore dell'area della legenda e posiziona l'annotazione sull'area di legenda.

amboolean

Definisce se l'indicatore di annotazione è visibile. I valori validi sono:

• true, che rende l'indicatore di annotazione visibile. Questo è il valore predefinito.
• false, che rende l'indicatore di annotazione invisibile.

amcolor

Definisce il colore per l'indicatore di annotazione, definito da una stringa con nome colore o specificazione numerica, o da una sfumatura definita da una stringa. Il valore predefinito è di 'rosso'.

amsize

La dimesione, in pixel, dell'indicatore annotazione. Il valore predefinito è 8.

amshape

Una forma per l'indicatore annotazione. Tutte le forme indicatore valide sono supportate. La forma predefinita è 'cerchio'.

amposizione

Definisce la posizione dell'indicatore relativa alle etichette testo dati, per grafici puntati come 'sopra, 'in fondo', o 'centro'. Non supportato per altri tipi di grafici.

amrotation

Un numero tra 0 e 360 che definisce l'angolo di rotazione dell'indicatore, in gradi.

ambwidth

Un numero che definisce la larghezza del bordo in pixel. Il valore predefinito è 1.

'ambcolor'

Un colore per il bordo indicatore, definito da una stringa con un nome colore o specificazione numerica. Il valore predefinito è 'vuoto'.

'ambdash'

Una stringa che definisce lo stile della sbarra del bordo. Usare un stringa di numeri che definisce la larghezza di una sbarra, seguita dalla larghezza dello spazio tra sbarre. Il valore predefinito è nessun trattino ('').

alboolean

Definisce se l'etichetta di annotazione è visibile. I valori validi sono:

• true, che rende l'etichetta di annotazione visibile. Questo è il valore predefinito.
• false, che rende l'etichetta di annotazione invisibile.

'altext'

Definisce il testo di etichetta annotazione. Il valore predefinito è senza testo di etichetta.

'alfont'

Definisce il font dell'etichetta annotazione. Il valore predefinito è 10pt Sans-Serif'.

'alcolor'

Definisce il colore di etichetta annotazione, per stringa con nome colore o specificazione numerica. Il valore predefinito è 'vuoto'.

'alposition'

Definisce una posizione per l'etichetta di annotazione relativa al contrassegno di annotazione. I valori validi sono:

• 'sopra', che posiziona l'etichetta di annotazione sopra il contrassegno di annotazione.
• 'in fondo', che posiziona l'etichetta di annotazione in fondo al contrassegno di annotazione.
• 'sinistra', che posiziona l'etichetta di annotazione a sinistra del contrassegno di annotazione.
• 'destra', che posiziona l'etichetta di annotazione a destra del contrassegno di annotazione.
• 'centro', che posiziona l'etichetta di annotazione al centro sul contrassegno di annotazione. Questo è il valore predefinito.

Inizio pagina

Esempio: Aggiunta di Annotazioni

La seguente richiesta specifica due annotazioni. La prima annotazione è sul componente grafico. Il proprio indicatore è una croce pirata gialla con uno sfondo nero, di 120 pixel orrizzontali, dal bordo sinistro dell'asse x al punto 800K, lungo l'asse y (numerica). L'etichetta si trova sotto al contrassegno. Solo la seconda annotazione ha una posizione (rappresentante in pixel), per non avere l'etichetta, e presenta l'indicatore predefinito, un cerchio rosso con dimensione di 8 pixel.

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US 
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
annotations : [
    {  
     position: {
       x: '120px',  
       y: 800000,
       parent: 'chart' 
       },
     marker: {  
       visible: true,
       color: 'yellow',
       size: 30,
       shape: 'piratecross',  
       rotation: 0,
       border: {
         width: 1,
         color: 'black',
         dash: ''
           }
       },
    label: {
       visible: true,
           text: 'Chart annotation: x: 120px, y: 800K',
           font: '14pt Times New Roman',
           color: 'black',
           position: 'bottom'  
       }
   },
   {
   position: {
     x: 10,  
     y: 200    
       }
   },
  ]
*END
ENDSTYLE
END

L'emissione è:

Inizio pagina

Esempio: Posizionamento di annotazioni relative ad una serie e gruppo

La seguente richiesta presenta una annotazione, su serie 1 e gruppo 1. Il valore y si trova al 50% lungo l'asse y. Il contrassegno è un triangolo blu.

GRAPH FILE WF_RETAIL_LITE 
SUM COGS_US GROSS_PROFIT_US REVENUE_US 
BY PRODUCT_CATEGORY 
ON GRAPH PCHOLD FORMAT JSCHART 
ON GRAPH SET LOOKGRAPH VBAR 
ON GRAPH SET STYLE * 
*GRAPH_JS 
annotations : [ 
    {   
     position: { 
       x: {series:1, group:1},   
       y: '50%', 
       parent: 'chart'  
       }, 
     marker: {   
       visible: true, 
       color:'blue', 
       shape: 'triangle',   
       rotation: 0, 
       border: { 
          width: 1, 
          color: 'black', 
          dash: '' 
           } 
       }, 
     label: { 
       visible: true, 
       text: 'Series annotation', 
       font: '10pt Times New Roman', 
       color: 'black', 
       position: 'bottom'   
       } 
   },     
  ] 
*END
ENDSTYLE 
END

L'emissione è:

Inizio pagina

Esempio: Posizionamento di una annotazione nell'area della legenda

La seguente richiesta posiziona una stella blu sopra il contrassegno verde della legenda nell'area della legenda.

GRAPH FILE WF_RETAIL_LITE 
SUM COGS_US GROSS_PROFIT_US REVENUE_US 
BY PRODUCT_CATEGORY 
ON GRAPH PCHOLD FORMAT JSCHART 
ON GRAPH SET LOOKGRAPH VBAR 
ON GRAPH SET STYLE * 
*GRAPH_JS 
legend: {lineStyle:{color:'red'}}, 
annotations : [ 
    {   
     position: { 
       x: '106px',   
       y: '.14px', 
       parent: 'legend'  
       }, 
     marker: {   
       visible: true, 
       color:'blue', 
       shape: 'fiveStar',   
       rotation: 0, 
       border: { 
         width: 1, 
         color: 'black', 
         dash: '' 
           }} 
       }, 
    
  ] 
*END
ENDSTYLE 
END

L'emissione è:

x

color:{
  type:'pattern',
   color: 'cstring',
   backgroundColor: 'bcstring',
   shape: 'sstring',
   size: snumber,
   pad: pnumber}

dove:

'cstring'

Definisce il colore della forma del modello, usando una stringa con il nome del colore o una specificazione numerica.

'bcstring'

Definisce il colore di sfondo dello spazio del modello, usando una stringa con il nome del colore o una specificazione numerica.

'sstring'

Definisce la forma per il carattere del modello. Si supportano tutte le forme di contrassegni.

snumber

La dimensione, in pixel, della forma del modello.

pnumber

La dimensione, in pixel, del riempimento tra le forme del modello.

Inizio pagina

Esempio: Uso di un modello per riepire la cornice del grafico

La seguente richiesta riempie la cornice del grafico con triangoli, il quale colore è una versione di blue e la quale dimensione è 10 pixel. Lo spazio tra triangoli è 8 pixel e il colore di sfondo è griglio chiaro:

GRAPH FILE WF_RETAIL_LITE
SUM AVE.COGS_US MDN.COGS_US 
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
fill: {
  color:{
   type:'pattern',
     color: '#00aeef',
     backgroundColor: 'lightgray',
     shape: 'triangle',
     size: 10,
     pad: 8}}   
*END
ENDSTYLE
END

L'emissione è:

Inizio pagina

Esempio: Uso di un modello per compilare le Serie Riser

La seguente richiesta definisce i modelli per colorare i riser per ogni serie in un grafico a barre verticali:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
*GRAPH_JS
series:[
 {series:0, color:{type:'pattern',color: 'blue',backgroundColor: 'lightgray',shape: 'triangle',size: 10,pad: 8}} ,  
 {series:1, color:{type:'pattern',color: 'red',backgroundColor: 'beige',shape: 'plus',size: 10,pad: 8}} ,
 {series:2, color:{type:'pattern',color: 'green',backgroundColor: 'yellow',shape: 'house',size: 10,pad: 8}} 
]
*END
ENDSTYLE
END

L'emissione è:

Inizio pagina

Esempio: Uso di un modello per riempire le sezioni della torta

La seguente richiesta definisce i modelli per colorare i riser per ogni serie in un grafico a torta:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US 
ACROSS PRODUCT_CATEGORY
ON GRAPH SET AUTOFIT ON
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
 {series:0, color:{type:'pattern',color: 'blue',backgroundColor: 'lightgray',shape: 'triangle',size: 10,pad: 8}} ,  
 {series:1, color:{type:'pattern',color: 'red',backgroundColor: 'beige',shape: 'plus',size: 10,pad: 8}} ,
 {series:2, color:{type:'pattern',color: 'green',backgroundColor: 'yellow',shape: 'house',size: 10,pad: 8}}, 
 {series: 3, color: {type:'pattern',color: 'orange',backgroundColor: 'antiquewhite',shape: 'square',size: 10,pad: 8}},
 {series: 4, color: {type:'pattern',color: 'lightgreen',backgroundColor: 'white',shape: 'arrow',size: 10,pad: 8}},
 {series: 5, color: {type:'pattern',color: 'steelblue',backgroundColor: 'cyan',shape: 'fiveStar',size: 10,pad: 8}},
 {series: 6, color: {type:'pattern',color: 'slateblue',backgroundColor: 'skyblue',shape: 'sixStar',size: 10,pad: 8}}
]
*END
ENDSTYLE
END

L'emissione è:

Inizio pagina

Esempio: Uso di un modello per compilare i Contrassegni Serie

La seguente richiesta genera un grafico a dispersione. I contrassegni per ogni serie contengono dei modelli e sono di dimensioni sufficientemente grandi per includere i modelli:

GRAPH FILE WF_RETAIL_LITE
SUM AVE.COGS_US GROSS_PROFIT_US MSRP_US 
ACROSS PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
 {series:0, marker:{size:15},color:{type:'pattern',color: 'blue',backgroundColor: 'lightgray',shape: 'triangle',size: 10,pad: 8}} ,  
 {series:1, marker:{size:20},color:{type:'pattern',color: 'red',backgroundColor: 'beige',shape: 'plus',size: 10,pad: 8}} ,
 {series:2, marker:{size:30},color:{type:'pattern',color: 'green',backgroundColor: 'yellow',shape: 'house',size: 10,pad: 8}}
]
*END
ENDSTYLE
END

L'emissione è:

setUseDataTextStackTotalOnTopFormat(true);
setTextFormatPreset(getDataTextStackedTotalOnTop(), 6); 

x

setUseDataTextStackTotalOnTopFormat(Boolean);

dove:

Boolean

Sono presenti i seguenti valori:

• true, che abilita la formattazione del valore totale in pila, usando setTextFormatPreset(getDataTextStackedTotalOnTop(), int); chiamata API.
• false, che disabilita la riformattazione del valore totale di portata Questo è il valore predefinito.

Inizio pagina

Esempio: Formattazione del valore totale di portata

La seguente richiesta abilita l'opzione di formato valore totale in pila, quindi formatta il totale in pila usando il formato presente 6 ($#), che prefissa il numero con il simbolo del dollaro ($):

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT PNG
ON GRAPH SET LOOKGRAPH VBRSTK1
ON GRAPH SET STYLE *
INCLUDE=ENIADefault_combine.sty,$
*GRAPH_SCRIPT
setPlace(true); 
setDataTextDisplay(true);
setDataTextPosition(4);
setDisplay(getDataTextStackedTotalOnTop(),true);
 setUseDataTextStackTotalOnTopFormat(true); 
setTextFormatPreset(getDataTextStackedTotalOnTop(), 6);  
*END
ENDSTYLE
END

L'emissione è: