React繪圖選項onclick事件

Question

我在我的反應應用程序中製作了一張高圖列表，現在我正試圖將一個onClick事件添加到圖表中。我的目標是，當用戶點擊一列時，我可以獲取X軸和Y軸的值，然後從頁面調用一個函數。使用plotoptions達到

onclick事件，如下：

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

這樣做的問題是，我可以調用函數，但我不能訪問該列的值。

所以，我試試這個：

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

這樣，我可以訪問該列中的值，通過this但不能調用功能，因爲這不保存當前頁面對象。

我的問題是，我怎麼能結合這兩個，所以我可以訪問所選列的值，並調用頁面上的功能？

我已經試過這樣：

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

這給了我onClick事件，而列，而不是當前頁面對象。

我也試過這樣：

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

但是，這也沒有給我什麼，我需要。

我敢肯定這是不是很困難，我無法找到它，或者正確的搜索詞...

Answer 1

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

現在this包含頁面的當前狀態，我可以從列中訪問信息e.point

Answer 2

你試過嗎？

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

您可能會發現更多的相關信息訪問以下網址：

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

Answer 3

在plotOption click事件是這樣的

JS Bin演示

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