使用高图在 iframe 全屏上切换按钮可见性

Question

我正在使用高图表，并且正在测试此处显示的切换全屏按钮 https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/chart-togglefullscreen/

我遇到的问题是，一旦高图表 iframe 填满屏幕，切换按钮就会被隐藏，而且我无法在不点击退出的情况下切换回来，这违背了切换按钮的目的。

这是js

var chart = Highcharts.chart('container', {
    credits: {
        enabled: false
    },

    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]
    }],

    navigation: {
        buttonOptions: {
            enabled: false
        }
    }
});

// The button handler
document.getElementById('button').addEventListener('click', function () {
    chart.fullscreen.toggle();
});

html

<div id="container" style="height: 300px; margin-top: 1em;"></div>
<button id="button">Toggle fullscreen</button>

我已尝试在两个元素上使用 z-index 和位置值，但切换按钮始终处于隐藏状态。有没有办法让切换按钮位于 Iframe 中或位于其上方，以便我可以触发它并在按钮单击事件（切换事件）时关闭全屏

提前致谢，如果您有任何想法。

Answer 1

作为解决方案，您可以添加一个按钮作为图表容器的子项，例如：

    chart: {
        ...,
        events: {
            render: function() {
                var chart = this,
                    x = 10,
                    y = chart.plotTop + chart.plotHeight + 50;

                if (!chart.customToggleBtn) {
                    chart.customToggleBtn = chart.renderer.button(
                        'Toggle fullscreen',
                        null,
                        null,
                        function() {
                            chart.fullscreen.toggle();
                        }).add();
                }

                chart.customToggleBtn.attr({
                    x: x,
                    y: y
                });
            }
        }
    }

现场演示： https://jsfiddle.net/BlackLabel/fbcmg392/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button

使用高图在 iframe 全屏上切换按钮可见性

Toggle button visibility on iframe fullscreen with highcharts

html

javascript

css

iframe

highcharts