Как реализовать выбор события клика или точки данных на apexCharts?

Question

Я пытаюсь использовать apexCharts Библиотека javascript и проблемы с реализацией события click Я прочитал документацию, но нет четкого примера того, как его реализовать.

Пока у меня есть этот код.

var options = {
            chart: {
                height: 350,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        position: 'top', // top, center, bottom
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%";
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#304758"]
                }
            },
            series: [{
                name: 'Inflation',
                data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
            }],
            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                position: 'top',
                labels: {
                    offsetY: -18,

                },
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                            colorFrom: '#D8E3F0',
                            colorTo: '#BED1E6',
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5,
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                    offsetY: -35,

                }
            },
            fill: {
                gradient: {
                    enabled: false,
                    shade: 'light',
                    type: "horizontal",
                    shadeIntensity: 0.25,
                    gradientToColors: undefined,
                    inverseColors: true,
                    opacityFrom: 1,
                    opacityTo: 1,
                    stops: [50, 0, 100, 100]
                },
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function (val) {
                        return val + "%";
                    }
                }

            },
            title: {
                text: 'Monthly PCB Washout Occurrences, 2018',
                floating: true,
                offsetY: 320,
                align: 'center',
                style: {
                    color: '#444'
                }
            },

            active: {
                 allowMultipleDataPointsSelection: true,
            },

            events:{

                   dataPointSelection: function(event, chartContext, config){

                           console.log(event);
                       }

                }
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();

Я попробовал сначала click событие, но выяснилось, что я ищу это dataPointSelection метод, это когда пользователь щелкает столбчатую / столбчатую диаграмму, он возвращает событие или данные элемента, есть идеи, как это реализовать? любое предложение было бы здорово!

Answer 1

Я согласен, что документы сейчас не очень хороши, и я улучшаю их каждый день.

Ваша конфигурация для событий неуместна. Вам нужно разместить events собственность внутри chart свойство как это

chart: {
  events: {
    dataPointSelection: function(event, chartContext, config) {
      console.log(chartContext, config);
    }
  }
}

Вот обновленная кодовая ручка вашего примера.

Обновлю документы с большим количеством примеров.

Отказ от ответственности: я являюсь автором библиотеки ApexCharts

Answer 2

Я думаю, это просто то, что вы ищете

      chart: {
    type: 'area',
    events: {
        dataPointSelection(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

если нужно по щелчку , это лучше

      chart: {
    type: 'area',
    events: {
        click(event, chartContext, config) {
            console.log(config.config.series[config.seriesIndex])
            console.log(config.config.series[config.seriesIndex].name)
            console.log(config.config.series[config.seriesIndex].data[config.dataPointIndex])
        }
    }
}

источник Как получить доступ к значению в функции dataPointSelection Apexchart

документация по событиям https://apexcharts.com/docs/options/chart/events/

Answer 3

Если вам нужна выбранная категория:

      events: {
              click(event, chartContext, config) {
                let ID = config.config.xaxis.categories[config.dataPointIndex];
                handleClick("Category Name" + ID);
              },
            },

Answer 4

      events: {
  dataPointSelection: function(event, chartContext, config) {

    alert (chartContext.w.globals.labels[config.dataPointIndex] )
    // The last parameter config contains additional information like `seriesIndex` and `dataPointIndex` for cartesian charts
  }
},