Question

我在我的react应用程序中创建了一个highcharts柱形图，现在我正在尝试将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中，点击事件就像这样

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

React plot选项onclick事件

3 个答案: