2012-01-19 4 views
7

Possiamo modificare le seguenti proprietà dei punti in una trama jquery flot:jquery flot, dimensione e colore che varia per ogni punto

la dimensione dei punti: Sto fondamentalmente cercando di tracciare un grafico tridimensionale. Le prime due dimensioni sono i valori xey e il valore della terza dimensione si rifletterà nella dimensione dei punti. Più grande è il valore, più grande è il punto.

il colore dei punti: Ancora, sto cercando di visualizzare una proprietà diversa dai valori x e y. maggiore è il valore, più scuro il punto.

[EDIT]: Sto provando a controllare queste proprietà per i punti individualmente e non per l'intera trama.

+1

Hai letto la documentazione (http://flot.googlecode.com/svn/trunk/API.txt)? Entrambe queste opzioni sono disponibili (in "Personalizzazione della serie di dati", riempimento e raggio) – Mark

+2

@Mark Umm, ho letto quello. Plz mi corregge se mi sto sbagliando ma quelle opzioni shadowSize e colori avranno effetto su tutti i punti della trama. Sto cercando di variare shadowSize e colori per i singoli punti. Come un punto che rappresenta un paese con una popolazione più alta avrà un punto più grande, qualcosa su quelle linee. – roopunk

risposta

16

Ti capisco ora. L'unico modo che posso vedere di fare questo è di passare una funzione di callback per l'opzione punto simbolo:

function someFunc(ctx, x, y, radius, shadow) 
{ 
    someFunc.calls++; 
    if (someFunc.calls % 2 == 0) 
    { 
    ctx.arc(x, y, radius * 4, 0, shadow ? Math.PI : Math.PI * 2, false); 
    } 
    else 
    { 
    ctx.arc(x, y, radius, 0, shadow ? Math.PI : Math.PI * 2, false); 
    } 
} 
someFunc.calls = 0; 

var options = { 
    series: { 
    lines: { show: true }, 
    points: { show: true, symbol: someFunc} 
    } 
}; 

somePlot = $.plot($("#placeholder"), [ d1 ], options); 

In quanto sopra che sto modificando le dimensioni raggio per ogni altro punto:

enter image description here

EXAMPLE HERE

+0

Grazie. Questo farà il lavoro. Il parametro 'someFunc.calls' manterrà traccia dell'indice del punto che viene tracciato ed è lo stesso dell'indice dell'array' data [] 'che è stato passato alla funzione trama. Il valore della popolazione sarà presente in un array separato 'pop_arr []' con il suo indice sincronizzato con quello dell'array "data". Il raggio varierà in base a 'pop_arr [someFunc.calls]'. Perfezionare. – roopunk