如何将全屏事件添加到 Highchart？答案

【问题标题】：How to add fullscreen event to a Highchart?如何将全屏事件添加到 Highchart？
【发布时间】：2020-05-12 20:32:24
【问题描述】：

我一直在尝试将全屏事件添加到高图表，但没有成功。我尝试过扩展 highcharts：

Highcharts.Chart.prototype.callbacks.push(function (chart) {
   Highcharts.addEvent(chart.container, 'webkitfullscreenchange mozfullscreenchange fullscreenchange MSFullscreenChange', function (e) {
       console.log('in fullscreen nonsense');
       this.reflow();
   });
});

并且在图表菜单中添加了全屏选项：

var fullscreen = {
    text: 'Toggle full screen. ESC to exit',
    onclick: function () {
        function launchIntoFullscreen(element) {
            var parentEl = element.renderTo;
            if(parentEl.requestFullscreen) {
                parentEl.requestFullscreen();
            } else if(parentEl.mozRequestFullScreen) {
                parentEl.mozRequestFullScreen();
            } else if(parentEl.webkitRequestFullscreen) {
                parentEl.webkitRequestFullscreen();
            } else if(parentEl.msRequestFullscreen) {
                parentEl.msRequestFullscreen();
            }
        }
        launchIntoFullscreen(this);
    }
};
Highcharts.getOptions()
          .exporting.buttons.contextButton.menuItems.push(fullscreen);

图表正确地全屏显示，但当它出现时，我希望它重排并填充可用区域。但是，它没有达到图表附加的全屏事件。我尝试将它附加到图表和图表容器上。我只尝试了特定于浏览器的全屏事件的一种变体。当我改用“点击”时，会触发事件回调。

我也尝试在 launchIntoFullScreen 函数中进行重排，但这也不起作用（即使我将图表设为全局变量）。

全屏可能不提供带有新尺寸信息的回流，但我不确定。我正在使用 Chrome。

【问题讨论】：

您能否将您的示例复制为 jsfiddle.net 上的现场演示？这将使我们能够重现问题并找到答案

标签： javascript highcharts

【解决方案1】：

在当前版本的 Highcharts (8.1.0) 中，这可以使用 chart.fullscreen.toggle() 函数来完成。

Highcharts 在jsfiddle 上有一个示例。万一发生故障的代码：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>


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

<script>
    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();
    });
</script>

【讨论】：

【解决方案2】：

创建一个图标并将点击功能绑定到它。创建一个类，然后单击将此类添加到图表容器中，使图像 z-index 置顶

.modal {
    position: fixed;
    width: 1000px;
    height: 485px !important;
    top: 0px;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
}
.modal  #moodcontainer{
    height: 485px;

}

然后运行这个函数：

$(function(){
$("#ExpandIcon").click(function() {
        $("#moodcontainer").toggleClass('modal');
        $("#moodcontainer").highcharts().reflow();
    });
});

应该可以完成这项工作。一旦 div 容器全屏显示，.reflow() 将刷新图表

您也可以将点击功能绑定到图表主体。

$('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });

【讨论】：