单击带有react apexcharts的事件

Question

我使用的是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”。这是我能为单击事件找到的最好的文档，但我无法让它工作。

任何帮助都会很好！谢谢

Answer 1

尝试将其添加到options对象中：

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

Answer 2

这里是代码的工作示例。

您可以使用在单击任何数据池时触发的dataPointSelection事件。

根据apexCharts上的文档：

当用户单击数据池(bar/列/标记/气泡/甜甜圈-切片)时，会触发dataPointSelection。除了config对象之外，第三个参数还包括其他信息，比如选择了哪个系列的dataPointIndex。如果启用了allowMultipleDataPointsSelection，则第三个参数包含selectedDataPoints属性以获取所有选定的dataPoints。

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

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])}
    }
}

希望这有帮助，快乐编码