highcharts缩放按钮为什么在缩放后没有消失,需要点击和缩放的次数相同才会消失。怎样让它点击一次就消失。

图片说明

这个不是你提的吗,当时不是说这个按钮是重置缩放, https://ask.csdn.net/questions/1095592

用下面例子看下,有没有问题

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <style type="text/css">
    </style>
    <script type="text/javascript">

        $(function () {
            var zoomImg;

            Highcharts.Chart.prototype.showResetZoom = function () {
                var chart = this;

                if (!zoomImg) {
                    zoomImg = chart.renderer.image("https://icons.iconarchive.com/icons/ampeross/qetto-2/32/search-icon.png", chart.chartWidth - 100, 10, 32, 32) //src, x, y, width, height
                        .on('click', function () {
                            chart.zoomOut();
                            $(this).remove();
                            zoomImg = null;
                        })
                        .attr({
                            zIndex: 100
                        })
                        .add()
                }
            }

            $('#container').highcharts({
                chart: {
                    zoomType: 'x',
                    selectionMarkerFill: 'rgba(0,0,0, 0.2)',
                    resetZoomButton: {
                        // 按钮定位
                        position: {
                            align: 'right', // by default
                            verticalAlign: 'top', // by default
                            x: 0,
                            y: -30
                        },
                        text: 'aaaa',
                        // 按钮样式
                        theme: {
                            fill: 'white',
                            text: "<img src='https://www.gravatar.com/avatar/35d73b489c80b662f62baccd4f8c4da4?s=32&d=identicon&r=PG&f=1' style='height:50px;width:50px'></img>",
                            style: {
                                color: 'red'
                            },
                            stroke: 'silver',
                            r: 0,
                            states: {
                                hover: {
                                    fill: '#41739D',
                                    style: {
                                        color: 'green'
                                    }
                                },
                            }
                        }
                    }
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]
            });
        });
    </script>
</head>
<body>

    <div id="container" style="min-width: 310px; height: 400px; margin: 0px auto;margin-left:200px;"></div>

</body>
</html>

https://blog.csdn.net/adamlevine7/article/details/69556558