如何更改 ApexCharts 按钮事件？答案

【问题标题】：How Can Change ApexCharts Button Event?如何更改 ApexCharts 按钮事件？
【发布时间】：2023-01-17 20:43:58
【问题描述】：

我想在我的项目中使用 apexcharts 的重置缩放按钮。我只想在用户按下所有按钮但页面正在重新加载后重置图形。有什么办法可以消除重新加载的动作吗？我没有太多关于 apexcharts 的信息。我在下面添加了示例 apexchart 图和 javascript 代码。你能给我主意吗？先感谢您..

 $(document).ready(function() {
        var options = {
            chart: {
                height: 400,
                type: 'area',
                toolbar: {
                    show: false,
                },
                events: {
                    selection: function(chart, e) {
                        console.log(new Date(e.xaxis.min) )
                    }
                },
                stacked: true
            },

            colors: ['#ef742a','#0f2648'],
            dataLabels: {
                enabled: false
            },

            series: [               
              {
                name: '{{ $treeItem['device_title'] }}',
                type:'area',
                data: []
              },
            ],

            fill: {
                type: 'gradient',
                gradient: {
                    opacityFrom: 0.6,
                    opacityTo: 0.2,
                    gradientToColors:"#1c3d89",
                }
            },
            
                  labels: [],

            legend: {
                position: 'top',
                horizontalAlign: 'right',
                show: true,
            },
            grid: {
                yaxis: {
                    lines: {
                        show: false,
                    }
                },
                padding: {
                    top: 20,
                    right: 0,
                    bottom: 0,
                    left: 10
                },
            },
            stroke: {
                show: true,
                curve: 'smooth',
                width: 2,
            },
        }

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

        chart.render();
        function generateDayWiseTimeSeries(baseval, count, yrange) {
            var i = 0;
            var series = [];
            while (i < count) {
                var x = baseval;
                var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

                series.push([x, y]);
                baseval += 86400000;
                i++;
            }

            console.log(series);

            return series;
        }

        var resetCssClasses = function (activeEl) {
            var els = document.querySelectorAll("button");
            Array.prototype.forEach.call(els, function (el) {
                el.classList.remove('active');
            });

            activeEl.target.classList.add('active')
        }

        document.querySelector("#chart_all").addEventListener('click', function (e) {
            resetCssClasses(e)
            chart.updateOptions({
                xaxis: {
                    min: undefined,
                    max: undefined,
                }
            })
        })

    });

【问题讨论】：

标签： javascript laravel apexcharts

【解决方案1】：

看起来问题与按下重置缩放按钮后重新加载页面有关。要防止页面重新加载，您可以删除 location.reload() 函数或在触发重新加载的事件上使用 preventDefault() 方法。或者，您可以使用 ajax 更新图表的数据而无需重新加载页面。

如何使用 AJAX 更新图表的数据：

document.querySelector("#chart_all").addEventListener('click', function (e) {
  e.preventDefault(); // prevent the page from reloading
  resetCssClasses(e);
  
  // use AJAX to retrieve new data
  $.ajax({
    type: "GET",
    url: "path/to/data",
    success: function(data) {
      chart.updateSeries([{
        data: data
      }]);
    }
  });
});

单击重置缩放按钮时，使用preventDefault()方法防止页面重新加载。然后，向指定的 URL 发出 AJAX 请求以检索新数据。成功检索数据后，将使用 updateSeries() 方法使用新数据更新图表。

代替路径/到/数据使用您希望通过 ajax 检索的数据的实际路径，您可能还需要添加错误处理，并且您还应该检查端点返回的数据格式并将其与 ApexCharts 接受的格式相匹配。

【讨论】：