web-dev-qa-db-fra.com

Highcharts => Obtenir l'identifiant d'un point en cliquant sur un graphique en courbes

Je suis en train de construire un graphique en courbes et j'aimerais, lorsque je clique sur un point de la ligne, afficher une fenêtre contextuelle contenant des données sur ce point. Le problème que je tente de résoudre est d'obtenir l'identifiant série associée à 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 marche pas.

Comment obtenons-nous l'identifiant d'un point?

Merci beaucoup.

javascriptjquerychartshighcharts
17
Johann

Selon la documentation, event.point contient un pointeur sur le point le plus proche du graphique.

Je voudrais donc écrire le event.point sur la console et voir ce qui est disponible.

console.log(event.point);

À partir de la documentation:

click: se déclenche lorsque l'utilisateur clique sur la série. Le mot-clé this fait référence à l'objet de série lui-même. Un paramètre, event, est transmis à la fonction. Celui-ci contient des informations d'événement communes basées sur jQuery ou MooTools, en fonction de la bibliothèque utilisée comme base pour Highcharts. En outre, event.point contient un pointeur sur le point le plus proche du graphique.

Exemple basé sur l'exemple des docs: http://jsfiddle.net/5nTYd/

Cliquez sur un point et vérifiez la console.

16
user113716

Je viens de faire cela en passant 3 objets dans le tableau de données de la série, puis en le tirant de l'attribut config de l'objet du clic.

Ainsi, vous pouvez construire vos données de série 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 de données situé au-dessus du premier élément, il s'agit de la date (x), le deuxième élément est un autre point de données (y) et le troisième est l'identifiant de l'objet qui représente cet objet de données. Ce "z" n'apparaîtra pas sur le graphique mais apparaîtra en tant que 3ème élément du tableau de configuration. Par exemple: en utilisant l'attribut plotOptions point pour capturer le clic, l'ID de l'objet se trouve dans l'alerte sous la forme this.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])}}}
     }
   },
11
user719754

Pour renvoyer le "ID" du point sélectionné sur le graphique, utilisez la valeur "X":

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/

3
Scott
 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])
         }
       }
     }
   }
 },
0
Sundaresan

j'ai trouvé ce vieux message dans ma recherche pour ==> ajouter un marqueur à un point lorsque je clique sur une "courbe de tendance" en Highcharts [dans les exemples: "série chronologique"] graphique [lorsque je clique n'importe où sur la ligne dessinée ]. 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 fournir!

0
dcparham

J'ai eu le même problème ... si je comprends bien. Ma solution est la suivante: obtenir l'identifiant de la série ... Voyez si cela aide ...

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