Щелкните событие с помощью диаграмм-апексов

Я использую 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». Это лучшая документация, которую я могу найти для события клика, но я могу не заставить его работать.

Любая помощь будет здорово! Спасибо


reactjs apexcharts
person jim    schedule 05.09.2019    source источник
comment
Это то, что вы ищете codepen.io/junedchhipa/pen/rqQWjW?   -  person Darpan Rangari    schedule 06.09.2019

Ответы (2)


arrow_upward
1
arrow_downward

Попробуйте добавить это в свой объект параметров:

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

arrow_upward
2
arrow_downward

здесь — рабочий пример вашего кода

Вы можете использовать событие 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])}
    }
}

Надеюсь, это поможет, счастливого кодирования

person Darpan Rangari    schedule 06.09.2019