Highchart- OnClick 事件，从堆叠条形图中获取 "category" 和 "name"

Question

我有一个 Highchart 堆叠图表，其类别和数据集如下：

categories =["Clark","Steven","Steve","Robert","Max"]
series =[{
name: "Wins"
data: [0, 0, 0, 0, 0]
},
{
name: "Losses"
data: [0, 0, 0, 0, 0]
},
{
name: "Open"
data: [22, 9, 8, 7, 7]
}]

当前输出可以在下面的屏幕截图中看到。

我已经通过文档了解了如何在堆叠图表的不同部分创建点击事件。但是-我特别想将个人的姓名（在 "categories" 集合和 "name" 属性（赢、输、开）中找到传递给函数-最终设置 "State"在我的 React 应用程序中。

这可能吗？如何在同一个函数中访问这两个变量>

感谢您的宝贵时间！

Answer 1

您需要调试它，尝试在您的事件侦听器上运行 console.log(this)，之后您应该能够找到您要查找的属性。一个简单的方法是查看正在运行应用程序的浏览器控制台。

它应该在这样的对象中：

this.chart.series[index].name

Answer 2

这是一个如何触发自定义函数并将类别和名称作为参数传递的示例。

演示：https://jsfiddle.net/BlackLabel/sycqfv9e/

  plotOptions: {
    series: {
      point: {
        events: {
          click() {
            console.log(this.series.name)
            customFun(this.category, this.series.name)
          }
        }
      }
    }
  },

如果您想以这种方式更新 React 应用程序中的状态，请在我可以处理的在线编辑器上复制您当前的工作。您可以使用此模板：https://stackblitz.com/edit/react-nwseym?file=index.js

Highchart- OnClick 事件，从堆叠条形图中获取 "category" 和 "name"

Highchart- OnClick event, get "category" and "name" from stacked bar chart

javascript

reactjs

highcharts

react-highcharts