0
191
VistasObtenga valores de punto de mira en múltiples diagramas flotantes
Estoy usando el complemento jQuery Flot Charts en uno de mis proyectos. Tengo varios gráficos en la misma columna y lo que estoy tratando de hacer es: mostrar la cruz en todos los gráficos si se desplaza sobre cualquiera de ellos. Estoy haciendo esto con éxito usando el siguiente código.
//graphs - this is an object which contains the references to all of my graphs. $.each(graphs, function(key, value) { $(key).bind("plothover", function (event, pos, item) { $.each(graphs, function(innerKey, innerValue) { if(key != innerKey) { innerValue.setCrosshair({x: pos.x}); } }); if(item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); console.log("x:" + x + ", " + "y:" + y); } }); }); 
Estoy iterando sobre los gráficos, agregando la cruz y vinculándolos entre sí. Entonces, ahora, cuando pasas el cursor sobre uno de los gráficos, verás la cruz en la misma posición en todos los demás.
No hay problemas con esto. Sin embargo, tengo problemas con la segunda parte de mi código:
if(item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); console.log("x:" + x + ", " + "y:" + y); } Y el problema es que estoy haciendo que console.log imprima valores solo cuando paso el mouse sobre el punto real mientras quiero obtener ese valor cada vez que la cruz cruza ese punto, no necesariamente el puntero del mouse. ¿Alguna pista de lo que estoy haciendo mal o tal vez hay una configuración en las opciones del gráfico para que eso funcione?
Y otra cosa es que solo puedo obtener el valor de un gráfico: en el que está mi mouse, parece que no puedo obtener los valores para el resto de los gráficos donde también se mueve la cruz.
1 Respuestas
Responde la pregunta0
El resaltado con
if(item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); console.log("x:" + x + ", " + "y:" + y); } solo funciona cuando el cursor está cerca de un punto (de lo contrario item es nulo).
Para obtener el punto más cercano a la cruz, debe resaltar manualmente buscando el punto más cercano e interpolar (para cada gráfico). El código para eso podría verse así:
var axes = value.getAxes(); if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) { return; } $('#output').html("x: " + pos.x.toPrecision(2)); $.each(graphs, function(innerKey, innerValue) { var i, series = innerValue.getData()[0]; // Find the nearest points, x-wise for (i = 0; i < series.data.length; ++i) { if (series.data[i][0] > pos.x) { break; } } // Now Interpolate var y, p1 = series.data[i - 1], p2 = series.data[i]; if (p1 == null) { y = p2[1]; } else if (p2 == null) { y = p1[1]; } else { y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]); } $('#output').html($('#output').html() + "<br />" + "y (" + innerValue.getData()[0].label + "): " + y.toPrecision(2));Consulte este violín para ver un ejemplo de trabajo completo. Algunas observaciones sobre el nuevo código y el violín:
- tiene valores de seno y coseno como datos de ejemplo, por lo que usa números de coma flotante, cambie en consecuencia para números enteros y/o valores de fecha
- utiliza un elemento
<p>para la salida en lugar de la consola - el código de interpolación y búsqueda de puntos se puede optimizar aún más si es necesario (versión básica aquí tomada del ejemplo en la página de Flot)
- funciona solo si solo hay una serie de datos por gráfico