1

我正在使用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”。这是我能找到的关于点击事件的最佳文档，但我无法让它工作。

任何帮助都会很棒！谢谢

4

2 回答 2

3

这是您的代码的工作示例

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

希望这会有所帮助，快乐编码

于 2019-09-06T13:18:43.600 回答
3

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

chart: {
    events: {
    dataPointSelection: (event, chartContext, config) => { 
        console.log(config.w.config.labels[config.dataPointIndex])}
    }
}
于 2019-09-05T21:46:29.970 回答