如何在apexCharts上实现点击事件或数据点选择? [英] How to implement click event or data point selection on apexCharts?

问题描述

我正在尝试使用apexCharts javascript库，但是在实现click事件时遇到了麻烦，我已经阅读了文档，但是没有明确的示例来实现它.

I am attempting to use the apexCharts javascript library and having trouble implementing the click event I have read the documentation but there's no clear example on how to implement it.

到目前为止，我已经有了这段代码.

So far I have this code.

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方法，这是当用户单击柱形图/条形图时，它将返回该事件或元素的数据，任何想法如何实现呢?任何建议都会很棒！

I tried first the click event but found out that what I am looking for is the dataPointSelection method this is when a user clicks the column/bar chart it will return the event or data of the element, any idea how to implement this? any suggestion would be great!

推荐答案

您对事件的配置放错了位置.您需要将events属性放置在属性之内

Your configuration for events is misplaced. You need to place events property inside chart property like this

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

这是您示例的更新的 codepen .

这篇关于如何在apexCharts上实现点击事件或数据点选择?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！