excellenty 2020-09-22 13:37 采纳率: 0%
浏览 108

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

图片说明

  • 写回答

2条回答 默认 最新

  • jingluan666 2020-09-22 14:37
    关注

    这个不是你提的吗，当时不是说这个按钮是重置缩放， 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>
    评论

报告相同问题？

悬赏问题

  • ¥15 Jenkins+k8s部署slave节点offline
  • ¥15 微信小游戏反编译后，出现找不到分包的情况
  • ¥15 如何实现从tello无人机上获取实时传输的视频流，然后将获取的视频通过yolov5进行检测
  • ¥15 WPF使用Canvas绘制矢量图问题
  • ¥15 用三极管设计一个单管共射放大电路
  • ¥15 孟德尔随机化r语言运行问题
  • ¥15 pyinstaller编译的时候出现No module named 'imp'
  • ¥15 nirs_kit中打码怎么看(打码文件是csv格式)
  • ¥15 怎么把多于硬盘空间放到根目录下
  • ¥15 Matlab问题解答有两个问题