Highcharts = & gt; Obtenir l'ID d'un point en cliquant sur un graphique linéaire

Je suis la construction d'une ligne graphique et je voudrais, lorsque je clique sur un point de la ligne, pour afficher un menu contextuel contenant des données sur ce point.
La question que j'ai essayer de le résoudre est d'obtenir l'id, la série associé à ce point ou quelque chose comme ça.

Voici mon code :

plotOptions: {
      column: {
        pointWidth: 20
      },

      series: {
        cursor: 'pointer',
        events: {
          click: function(event) {
            requestData(event.point);
          }
        }
      }

J'ai essayé

requestData(this.point)

requestData(this.point.id)

aussi mais ça ne fonctionne pas.

Comment pouvons-nous obtenir l'id d'un point ?

Merci beaucoup.

source d'informationauteur Johann

16

Selon les docs, événement.point détient un pointeur vers le point le plus proche sur le graphique.

Donc j'écrirais l' event.point à la console, et de voir ce qui est disponible.
```
console.log(event.point);
```
À partir de la documentation:

cliquez sur: se Déclenche lorsque la série est cliqué. Le mot-clé this fait référence à la série de l'objet lui-même. Un seul paramètre, le cas est transmis à la fonction. Cette contient des informations sur l'événement basé sur jQuery ou MooTools selon la bibliothèque est utilisée comme base pour Highcharts. En outre, l'événement.point détient un pointeur vers le point le plus proche sur le graphique.

Exemple basé sur l'exemple de la doc: http://jsfiddle.net/5nTYd/

Cliquez sur un point, et de vérifier la console.
10

J'ai juste fait cela en passant de 3 objets dans la série de tableau de données, puis en le tirant hors de l'objet de configuration de l'attribut à partir du clic.

De sorte que vous pouvez construire votre série de données à quelque chose comme ceci:
```
 series: [{
  name: 'Example',
  yAxis: 0,
  type: 'spline',
  data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]]
}]
```
Dans l'attribut data-dessus le 1er élément est la date (x), le 2e élément est un autre point de données (y), et le 3ème est l'id de l'objet qui représentent les données de l'objet. Ce "z" ne sera pas affiché sur le graphique, mais apparaissent comme le 3ème élément dans le tableau de config. Par exemple: à l'aide de plotOptions point d'attribut pour capturer le clic, l'ID de l'objet est dans l'alerte.config[2]
```
  plotOptions: {
    series: {
      cursor: 'pointer',
      point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' +  this.series.name + ' ID: ' + this.config[2])}}}
     }
   },
```

Pour revenir à la " ID " du point sélectionné sur la carte, utilisez le 'X' valeur:

plotOptions: {
    series: {
        cursor: 'pointer',
        events: {
            click: function(event) {
                   //Log to console
                console.log(event.point);
                alert(this.name +' clicked\n'+
                      'Alt: '+ event.altKey +'\n'+
                      'Control: '+ event.ctrlKey +'\n'+
                      'Shift: '+ event.shiftKey +'\n'+
                      'Index: '+ event.point.x);
            }
        }
    }
},

Voir un exemple ici: http://jsfiddle.net/engemasa/mxRwg/

j'ai trouvé ce vieux post dans ma recherche d' ==>ajouter un marqueur à un point où je clique sur un Highcharts "Ligne de Tendance" [dans les exemples: "la ligne de temps de la série"] tableau[quand je clique n'importe où sur la ligne tracée lui-même]. eh bien, sans vous montrer trop de code, regardez dans le

  cursor: 'pointer',
                    point: {
                      events: {
                             click: function(e) {
                                alert("X("+this.x+"),Y("+this.y+")");
                                }//click
                          }//events
                           }//point

si vous souhaitez plus de détails, je suis heureux de donner!

J'ai eu le même problème ... si je comprends bien.
Ma solution est ce, afin d'obtenir l'id de la série ...
Voir si ça aide ...

plotOptions{
 series:{
  cursor: 'pointer',
    events: {
      click: function(event) {
        console.log(event.point.series.userOptions.id);
      }
    }
  }

 plotOptions: {
   series: {
     cursor: 'pointer',
     point: {
       events: {
         click: function() {
           console.log(this); 
           alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' +  this.series.name + ' ID: ' + this.config[2])
         }
       }
     }
   }
 },

Vous devez vous connecter pour publier un commentaire.