2011-12-14 21 views
16

Estoy usando el gráfico "Datos de tiempo con intervalos irregulares" de Highcharts. Como sabe cuando el mouse se mueve sobre puntos de línea, la función del formateador se ejecuta y muestra cierta información. Quiero saber el índice del punto que el mouse mueve sobre él. Entonces, si el mouse se mueve sobre el primer punto de la línea, la información sobre herramientas muestra "1" y el segundo punto muestra "2" y así sucesivamente. thnx.¿Cómo obtener el índice de un punto en Highcharts?

+2

respuesta de Edgar parece ser la mejor, requiere ningún procesamiento. –

Respuesta

58

Esto funcionó para mí usando v2.2:

this.series.data.indexOf(this.point) 
+0

Funcionó también para mí. ¡Sencillo! –

+3

excelente, corto y simple !!!. aunque no creo que necesite el ** this.point ** (entre paréntesis), solo ** this ** –

+0

Esta debería ser la respuesta aceptada. La respuesta aceptada es un hack feo. –

0

Esto es casi tan hacky como se trata, y se volverá lento como el infierno con muchos puntos, pero funcionará. La idea general es buscar a través de todos los puntos de datos de la serie hasta que encuentre el uno con el punto actual:

tooltip: { 
    formatter: function() { 
     for(var i=0;i<this.series.data.length;i++){ 
       var item = this.series.data[i]; 
       if(item.x == this.x && item.y == this.y) 
       return 'point ' + i; 
     } 
     return 'not found' 
    } 
    } 

ejemplo vivo: http://jsfiddle.net/Fuv4h/

+0

Esto es exactamente lo que quiero. Pero como mencionaste, este código requiere mucho tiempo para ejecutarse especialmente cuando la línea está llena de puntos. Por cierto, te agradezco – Morteza

11

Una forma es pre-procesar los datos a contener una propiedad con el índice. En el ejemplo de la nieve profundidad que podría hacer una preparación como esta:

function prepare(dataArray) { 
    return dataArray.map(function (item, index) { 
     return {x: item[0], y: item[1], myIndex: index}; 
    }); 
}; 

para convertir la matriz de [x, y] ser un objeto como { x: x, y: y, myIndex: i}. Entonces es fácil de recoger ese índice en el formateador con:

formatter: function() { 
    return 'point ' + this.point.myIndex; 
} 

Ejemplo de jsfiddle

+1

Este código parece más rápido. Lo pruebo en mi proyecto tan pronto como pueda. Thnx eolsson. – Morteza

+0

Sí, debería ser más rápido que buscar el índice, pero consumirá más memoria. – eolsson

+1

Wow ...Ahora llegué a saber que puedo agregar más atributos aparte del nombre, x, y, nota en la matriz de objetos. +1 para ese –

4

Para que conste su puede hacerlo directamente de una manera agradable

Es tienda en:

this.points[0].point.x 
+0

Esto funciona para mí, no estoy seguro de por qué se votó negativamente. – MightyPork

+0

Puedo decirle exactamente por qué esto se revocó: porque se basa en el contenido de X para ser un índice. En mi caso, X era una cita, así que obtuve las fechas. Sin embargo, al usar 'seriesMapping' mapeé la tercera columna de mi CSV en un índice real y luego accedí usando esta línea :) +1 de mí –

1

Dado que los datos están ordenados, puede usar un binary search.

Una búsqueda binaria debería funcionar bien incluso para una gran cantidad de puntos (del artículo de wikipedia: "Por ejemplo, buscar una lista de un millón de elementos lleva hasta un millón de iteraciones con búsqueda lineal, pero nunca más que veinte iteraciones con búsqueda binaria "

Ejemplo:.

var bsComparator = function(a, b) { 
    if (a.x < b.x) { return -1; } 
    if (a.x > b.x) { return 1; } 
    return 0; 
}; 
var binarySearch = function(series_data, point) { 
    var low = 0, high = series_data.length - 1, 
     i, comparison; 
    while (low <= high) { 
     i = Math.floor((low + high)/2); 
     comparison = bsComparator(series_data[i], point); 
     if (comparison < 0) { low = i + 1; continue; } 
     if (comparison > 0) { high = i - 1; continue; } 
     return i; 
    } 
    return null; 
}; 


tooltip: { 
    formatter: function() { 
     var pointIndex = binarySearch(this.series.data, this.point); 
     return "Point index: " + pointIndex; 
    } 
} 

(la función binarySearch anteriormente se inspira en http://www.dweebd.com/javascript/binary-search-an-array-in-javascript/)

1

Sou nds como usted solo necesitan el valor xAxis (es decir hora). Uso: this.xData.indexOf(point.x)

this.points se agruparán en series más grandes, por lo que sería necesario realizar una búsqueda más profunda a través de puntos [0] ... puntos [n].

1

Esto es todo lo que trabajó para mí en Highstock JS v4.2.4:

var index = this.points[0].point.dataGroup.start; 
Cuestiones relacionadas