如何在apexCharts上实现点击事件或数据点选择？

Question

我正在尝试使用 apexCharts javascript 库，但在实现点击事件时遇到了问题我已经阅读了文档，但没有关于如何实现它的明确示例。

到目前为止我有这段代码。

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 方法，当用户单击 column/bar 图表时，它会 return 元素的事件或数据，知道如何实现吗？任何建议都会很棒！

Answer 1

您的事件配置有误。你需要把 events 属性放在 chart 属性里面，像这样

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

这是您示例的更新 codepen。

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

来源How to access value on dataPointSelection function of 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);
              },
            },

如何在apexCharts上实现点击事件或数据点选择？

How to implement click event or data point selection on apexCharts?

javascript

apexcharts