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”。 This是我可以找到的有关click事件的最佳文档，但是我无法使其正常工作。

任何帮助都会很棒！谢谢

Answer 1

here是您的代码的有效示例

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

根据apexCharts上的文档：

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

希望这会有所帮助，祝您编程愉快

Answer 2

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

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

点击事件与react-apexcharts

2 个答案: