Réagir sur les options de tracé sur l'événement onclick

Question

J'ai créé un graphique en histogramme dans mon application de réaction et j'essaie maintenant d'ajouter un événement onClick au graphique. Mon but est que lorsque l'utilisateur clique sur une colonne, je peux obtenir les valeurs des axes X et Y, puis appeler une fonction de la page.

L'événement onClick est réalisé en utilisant plotoptions, comme suit:

plotOptions={{ 
    series: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click:() => { 
      this.fuction.call(this, 1); 
     } 
     } 
    } 
    } 
}} 

Le problème est que je peux appeler la fonction, mais je ne peux pas accéder aux valeurs de la colonne.

Alors, j'essaie ceci:

plotOptions={{ 
    series: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click: function() { 
      console.log(this); 
     } 
     } 
    } 
    } 
}} 

De cette façon, je peux accéder aux valeurs de la colonne, par this mais ne peut pas appeler la fonction, car cela ne tient pas l'objet de la page courante.

Ma question est, comment puis-je combiner les deux, de sorte que je peux accéder à la valeur de la colonne sélectionnée et appeler la fonction sur la page?

J'ai essayé:

plotOptions={{ 
    series: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click: function (e) { 
      console.log(this); 
      console.log(e); 
     } 
     } 
    } 
    } 
}} 

Ce qui me donne l'événement onClick, et la colonne, mais pas l'objet de la page courante.

J'ai aussi essayé:

plotOptions={{ 
    column: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click: (e) => { console.log(this); console.log(e); } 
     } 
    } 
    }      
}} 

Mais cela ne me donne pas aussi ce que je dois.

Je suis sûr que ce n'est pas très difficile, je ne peux pas le trouver ou le terme de recherche correct ...

Answer 1

plotOptions={{ 
    series: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click: (e) => { console.log(this); console.log(e.point.category); console.log(e.point.y); } 
     } 
    } 
    } 
}} 

Maintenant this contient l'état actuel de la page, et je peux accéder aux informations de la colonne de e.point

Answer 2

Avez-vous essayé?

click: function(e) { 
    console.log(
     e.yAxis[0].value, e.xAxis[0].value 
    ) 
} 

Vous pouvez trouver plus d'infos sur ce lien:

http://api.highcharts.com/highcharts/chart.events.click

Answer 3

En cas de clic de plotOption est comme ce

JS Bin Démo

plotOptions: { 
    series: { 
     cursor: 'pointer', 
     point: { 
      events: { 
       click: function() { 
        console.log('X: ' + this.x + ', Y: ' + this.y); 
        //call function passing this values as arguments 
       } 
      } 
     } 
    } 
},