web-dev-qa-db-fra.com

Comment obtenir l'index d'un point dans Highcharts?

J'utilise le tableau de Highcharts "Données temporelles avec intervalles irréguliers". Comme vous le savez lorsque la souris survole des points de la ligne, la fonction de formatage s'exécute et affiche certaines informations. Je veux connaître l'index du point sur lequel la souris passe dessus. Ainsi, si la souris survole le premier point de la ligne, l'info-bulle indique "1" et le deuxième point indique "2", etc. thnx.

javascripthighcharts
16
Morteza

Cela a fonctionné pour moi avec v2.2: 

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

Une solution consiste à prétraiter les données pour qu'elles contiennent une propriété avec l'index. Dans l'exemple de profondeur de neige, vous pouvez effectuer une préparation comme celle-ci:

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

convertir le tableau de [x, y] en un objet comme { x: x, y: y, myIndex: i}. Ensuite, il est facile de récupérer cet index dans le formateur avec:

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

Exemple sur jsfiddle

12
eolsson

Pour mémoire, vous pouvez le faire directement de façon agréable

Il est stocké dans:

this.points[0].point.x
5
user789148

Les données étant triées, vous pouvez utiliser une recherche binaire . 

Une recherche binaire devrait bien fonctionner même pour un grand nombre de points (extrait de l'article de Wikipédia: "Par exemple, rechercher dans une liste d'un million d'éléments prend jusqu'à un million d'itérations avec la recherche linéaire, mais jamais plus de vingt itérations avec recherche binaire . "

Exemple:

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 fonction binarySearch ci-dessus est inspirée par http://www.dweebd.com/javascript/binary-search-an-array-in-javascript/ )

2
codeape

On dirait que vous n’avez besoin que de la valeur xAxis (c’est-à-dire le temps). Utilisation: this.xData.indexOf(point.x)

ces points seront regroupés en grandes séries et nécessiteront donc une recherche plus approfondie entre les points [0] ... points [n].

1
danb201268326

C'est tout ce qui a fonctionné pour moi sur Highstock JS v4.2.4:

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

C’est à peu près le même hacky qu’il vient, et ça va devenir lent comme bonjour avec beaucoup de points, mais ça va marcher. L'idée générale est de parcourir tous les points des données de la série jusqu'à trouver celui qui correspond au point actuel:

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'
     }
  }

Exemple live: http://jsfiddle.net/Fuv4h/

0
Jamiec

Si vous avez accès à votre point, vous pouvez y accéder simplement, this.point.index ou simplement this.index si this fait référence au point où il a lui-même Accès à son index,

Dans mon cas, je l’utilise toujours parce que c’est plus simple que la solution @ Edgar, ce qui est également très bien.

0
Saif Ullah