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

Question

我正在尝试使用apexChartsjavascript 库并且在实现 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

我认为这正是您正在寻找的

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

源如何访问 Apexchart 的 dataPointSelection 函数上的值

文档事件https://apexcharts.com/docs/options/chart/events/

Answer 2

您的事件配置放错了位置。你需要像这样把events财产放在财产里面chart

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

这是您示例的更新代码笔。