带有 react-apexcharts 的点击事件答案

【问题标题】：Click event with react-apexcharts带有 react-apexcharts 的点击事件
【发布时间】：2019-09-05 21:16:59
【问题描述】：

我正在使用react-apexcharts，一旦用户单击其中一个部分，我想在饼图中添加一个事件。这是我的图表：

<div className="pie">
    <Chart options={{
        labels: [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ],
        theme: {
            monochrome: {
                enabled: false
            }
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: "100%"
                },
                legend: {
                    show: false
                }
            }
        }]
    }}
    colors={["#1B2260"]}
    series={[44, 55, 41, 17, 15]}
    labels={["Apple", "Mango", "Orange", "Watermelon"]}
    type="pie"
    width="300" />
</div>

当用户点击“Apple”部分时，我想打印“Apple”。 This 是我能找到的关于点击事件的最佳文档，但我无法让它工作。

任何帮助都会很棒！谢谢

【问题讨论】：

这是你要找的东西codepen.io/junedchhipa/pen/rqQWjW 吗？

标签： reactjs apexcharts

【解决方案1】：

尝试将其添加到您的选项对象中：

chart: {
    events: {
    dataPointSelection: (event, chartContext, config) => { 
        console.log(config.w.config.labels[config.dataPointIndex])}
    }
}

【讨论】：

【解决方案2】：

here 是您的代码的工作示例

您可以使用dataPointSelection 事件，当单击任何数据点时会触发该事件。

根据 apexCharts 上的文档：

dataPointSelection 当用户点击数据点时触发（条/列/标记/气泡/甜甜圈切片）。第三个论点，在除了配置对象，还包括附加信息就像从哪个系列中选择了哪个 dataPointIndex 一样。如果你有启用allowMultipleDataPointsSelection，第三个参数包括 selectedDataPoints 属性获取所有选中的数据点。

在您的情况下，您必须在选项下添加新属性：

chart: {
    events: {
    dataPointSelection: (event, chartContext, config) => { 
        // this will print mango, apple etc. when clicked on respective datapoint
        console.log(config.w.config.labels[config.dataPointIndex])}
    }
}

希望对您有所帮助，祝您编码愉快

【讨论】：