2012-01-19 8 views
7

¿Podemos cambiar las siguientes propiedades de los puntos en una parcela jQuery flot:flot jQuery, variando el tamaño y el color de cada punto

el tamaño de los puntos: Básicamente, estoy tratando de trazar un gráfico tridimensional. Las dos primeras dimensiones son los valores xey, y el valor de la tercera dimensión se reflejará en el tamaño de los puntos. Cuanto mayor sea el valor, mayor será el punto.

el color de los puntos: De nuevo, estoy tratando de mostrar una propiedad que no sean los valores x e y. Cuanto mayor sea el valor, más oscuro será el punto.

[EDITAR]: Estoy tratando de controlar estas propiedades para los puntos de forma individual y no para toda la trama.

+1

¿Has leído la documentación (http://flot.googlecode.com/svn/trunk/API.txt)? Ambas opciones están disponibles (en "Personalización de la serie de datos", relleno y radio) – Mark

+2

@Mark Umm, lo leí. Por favor corrígeme si me estoy equivocando, pero esas opciones shadowSize y colores tendrán efecto en todos los puntos de la trama. Estoy intentando variar el tamaño de la sombra y los colores para puntos individuales. Al igual que un punto que representa un país con mayor población tendrá un punto más grande, algo en esas líneas. – roopunk

Respuesta

16

Te entiendo ahora. La única forma que veo de hacer esto es mediante el paso de una función de devolución de llamada a la opción de punto símbolo:

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); 

En lo anterior estoy ajustando el tamaño del radio para todos los demás puntos:

enter image description here

EXAMPLE HERE

+0

Gracias. Esto hará el trabajo. El parámetro 'someFunc.calls' hará un seguimiento del índice del punto que se está trazando y es el mismo que el índice de la matriz' data [] 'que se pasó a la función de trazado. El valor de población estará presente en una matriz separada 'pop_arr []' con su índice en sincronización con el de la matriz de "datos". El radio variará de acuerdo con 'pop_arr [someFunc.calls]'. Perfecto. – roopunk

Cuestiones relacionadas