反应绘图选项 onclick 事件

Question

我在我的 React 应用程序中制作了一个 highcharts 柱形图，现在我正在尝试向图表添加一个 onClick 事件。我的目的是当用户点击一个列时，我可以获得X和Y轴的值，然后从页面调用一个函数。

onClick事件是使用plotoptions实现的，如下：

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

你试过吗？

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

您可以在下面找到更多信息 link :

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

Answer 2

在plotOption中点击事件是这样的

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

Answer 3

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

现在 this 包含页面的当前状态，我可以从 e.point

的列中访问信息

反应绘图选项 onclick 事件

React plot options onclick event

javascript

reactjs

highcharts

onclick

react-highcharts