reactjs - Apex 图表 - 限制缩小

Question

我正在使用 apexcharts v3.19.3，我想知道如何将我的缩小选项限制在可用的 x 轴范围内。目前，我可以无限缩小。

apexcharts 文档中的示例代码足以重现问题。 Keep zooming out to recreate my problem

Answer 1

好吧，经过一番挖掘，我解决了这个问题。在这里留下解决方案。因此，Apex 让我们可以访问多个事件。 BeforeZoom 在缩放之前触发，让我们可以访问新的最大和最小位置。我只是比较看看我原来的范围是否比新范围小。如果是这样，我返回了我的原始范围，这将禁用缩小。

    charts : { 
    events : {
                beforeZoom : (e, {xaxis}) => {
                    let maindifference = (new Date(props.data[0].date)).valueOf() - new Date(props.data[props.data.length-1].date).valueOf();
                    let zoomdifference =   xaxis.max - xaxis.min ;
                    if( zoomdifference > maindifference )
                    return  {
                        // dont zoom out any further
                        xaxis: {
                            min: props.data[0].date,
                            max: props.data[props.data.length-1].date
                        }
                    }; 
                    else {
                        return {
                            // keep on zooming
                            xaxis: {
                                min: xaxis.min,
                                max: xaxis.max
                            }
                        }
                    }
                }
            }
            }