带有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

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

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

Answer 2

这是您的代码的工作示例

您可以使用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])}
    }
}

希望这有帮助，快乐编码