javascript - xaxis - ¿Cómo obtener el índice de un punto en Highcharts?

xaxis highcharts

Question

Estoy usando la tabla de "Datos de tiempo con intervalos irregulares" de Highcharts. Como sabe, cuando el mouse se mueve sobre los puntos de línea, la función del formateador se ejecuta y muestra 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

Answer 1

Dado que los datos están ordenados, puede utilizar una búsqueda binaria .

Una búsqueda binaria debería funcionar bien incluso para un gran número de puntos (del artículo de wikipedia: "Por ejemplo, para buscar en una lista de un millón de elementos se necesitan hasta un millón de iteraciones con búsqueda lineal, pero nunca más de 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 anterior está inspirada en http://www.dweebd.com/javascript/binary-search-an-array-in-javascript/ )

Answer 2

Esto es casi tan intrincado como es posible, y se volverá más lento con muchos puntos, pero funcionará. La idea general es mirar a través de todos los puntos en los datos de la serie hasta que encuentre el que coincida 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 en vivo: http://jsfiddle.net/Fuv4h/

Answer 3

Esto es todo lo que me funcionó en Highstock JS v4.2.4:

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

Answer 4

Esto me funcionó usando v2.2:

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

Answer 5

Para el registro puedes hacerlo directamente de una manera agradable.

Se encuentra en:

this.points[0].point.x

Answer 6

Parece que solo necesitas el valor de xAxis (es decir, el tiempo). Utilice: this.xData.indexOf(point.x)

estos.puntos se agruparán en series más grandes, por lo que necesitarían una búsqueda más profunda a través de los puntos [0] ... puntos [n].

Answer 7

Si tiene acceso a su punto, entonces puede acceder de forma simple, this.point.index o simplemente this.index si se refiere al punto en sí para obtener acceso a su índice,

En mi caso, siempre uso esto porque es más simple que la solución @Edgar, que también es genial.

Answer 8

Una forma es preprocesar los datos para que contengan una propiedad con el índice. En el ejemplo de profundidad de nieve, podrías 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] para que sea un objeto como { x: x, y: y, myIndex: i} . Entonces es fácil recoger ese índice en el formateador con:

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

Ejemplo en jsfiddle