5

我在我的反应应用程序中制作了一个 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);  }
      }
    }
  }                    
}}

但这也没有给我我需要的东西。

我相信这不是很难，我只是找不到它，或者正确的搜索词......

4

3 回答 3

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

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

于 2017-05-03T08:11:05.257 回答
0

在 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
                }
            }
        }
    }
},
于 2017-05-02T16:49:08.360 回答
0

你试过这个吗？ 

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

您可以通过此链接找到更多信息：

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

于 2017-05-02T16:33:42.140 回答