在 Highcharts 中为全屏捕获逃生事件

Question

我需要在 highcharts 中从全屏获取转义键事件，以便在从全屏转义后调整容器的高度。

Answer 1

Highcharts 从浏览器请求全屏。

你可以监听各种 fullscreenchange 事件，并根据它做一些动作：

if (document.addEventListener) {
  document.addEventListener('webkitfullscreenchange', exitHandler, false);
  document.addEventListener('mozfullscreenchange', exitHandler, false);
  document.addEventListener('fullscreenchange', exitHandler, false);
  document.addEventListener('MSFullscreenChange', exitHandler, false);
}

function exitHandler() {
  if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
    console.log('Exiting fullscreen. Doing chart stuff.');
    setContainerHeight(); // do your magic
  }
}

有关检测全屏的一般情况，请参阅 this JSFiddle demonstration 或 this discussion。

Answer 2

虽然上述方法有效，但我想我会放弃我的解决方案，因为它不适合我的环境（同一页面上的多个图表，如 here 所述；部分链接到具有不同需求的模块）。

当图表退出全屏模式时，我最终使用 Highcharts responsive callback option 执行代码。

    responsive: {
        rules: [{
            condition: {
                // A callback function to gain complete control on when the responsive rule applies. Return true if it applies
                callback: function () {
                    
                    if (this.chartHeight > (window.innerHeight / 2) || this.chartWidth > (window.innerWidth / 2)) {

                        console.log('responsive cb true:', this.renderTo.id);

                        _fsChartID = this.renderTo.id;
                        return true;

                    } else {

                        console.log('responsive cb false:', this.renderTo.id);

                        if (this.renderTo.id === _fsChartID) { // only hit when exiting fullscreen
                            _fsChartID = null; // reset _fsChartID to prevent infinite loop
                            this.redraw(); // call whatever function you need when exiting fullscreen
                        }

                        return false;

                    }                

                }
            }
        }]
    }

基本上：

1. 定义一个变量：_fsChartID 以跟踪哪个图表处于全屏模式。对我来说，这被定义为需要它的模块中的全局变量。
2. 每当图表进入全屏模式时，将此变量更新为正确的图表 ID。
3. 如果图表未通过全屏测试，请检查其 ID 是否与进入全屏的图表相同。
   • 如果是这样，请重置 _fsChartID 变量并执行您需要的操作
   • 否则，正常返回false

请注意，我只是调用了 this.redraw()，因为我的问题与退出全屏时图表未正确重绘有关。