如何在反应顶点图表的点击事件上调用反应函数

Question

我想在 React 顶点图表的点击事件上调用 React 函数。在点击顶点图表栏或饼图切片时，我想调用反应函数示例：-

dataPointSelection: function (event, chartContext, config) {
this.myFunction();
}

我不能从这里调用 myFunction()

Answer 1

有一个简单的方法可以做到这一点：-

 dataPointSelection: (event, chartContext, config) => {
this.myFunction();
}

我错过了 => 调用函数实际上你必须从箭头函数调用反应方法，因为它当前指向图表实例而不是反应实例。

Answer 2

如果需要点击,这个更好

chart: {
    type: 'area',
    events: {
        click(event, chartContext, config) {

            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
            
            yourFunctionHere();
            
        }
    }
}

文档事件https://apexcharts.com/docs/options/chart/events/

Answer 3

只需这样做：- 图表： { id: "基本栏",

                events: {
                    click: (event, chartContext, config) => {
                        this.myFunction(config.dataPointIndex)
                       
                    }
                },
            },

需要注意的是“=>”

如何在反应顶点图表的点击事件上调用反应函数

How to call react function on click event of react apex chart

reactjs

charts

apex