反应绘图选项 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

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

现在this包含页面的当前状态，我可以从列中访问信息e.point