Highcharts全屏API isOpen失效，自定义关闭图标位置异常求助

一、修复fullscreenOpen事件中关闭图标位置问题 #

fullscreenOpen触发时，图表尚未完成全屏后的尺寸重计算，导致plotWidth等属性仍为旧值。可以通过以下两种方式解决：

• 方式1：利用redraw事件延迟更新
  在fullscreenOpen事件中临时监听一次redraw，待图表重绘完成后再调整图标位置，避免重复触发：

chart.events.fullscreenOpen = function() {
  const updateIconPos = () => {
    const plotRight = this.plotLeft + this.plotWidth;
    // 按需调整图标偏移量
    yourCloseIcon.style.left = `${plotRight - 30}px`;
    yourCloseIcon.style.top = '10px';
    // 移除监听，防止后续redraw重复执行
    this.off('redraw', updateIconPos);
  };
  this.on('redraw', updateIconPos);
};

• 方式2：用setTimeout等待布局完成
  通过短延迟让浏览器完成全屏布局后再更新位置：

chart.events.fullscreenOpen = function() {
  setTimeout(() => {
    const plotRight = this.plotLeft + this.plotWidth;
    yourCloseIcon.style.left = `${plotRight - 30}px`;
    yourCloseIcon.style.top = '10px';
  }, 100); // 延迟时间可根据实际情况调整
};

二、判断图表是否处于全屏状态的方法 #

虽然chart.fullscreen.isOpen未定义，但可通过以下可靠方式判断：

• 方式1：检查容器类名
  Highcharts全屏时会给容器添加highcharts-fullscreen-container类，直接校验该类：

const isFullscreen = chart.container.classList.contains('highcharts-fullscreen-container');

• 方式2：使用浏览器全屏API
  通过标准全屏元素判断，兼容主流浏览器前缀：

const isFullscreen = document.fullscreenElement === chart.container ||
  document.webkitFullscreenElement === chart.container ||
  document.mozFullScreenElement === chart.container ||
  document.msFullscreenElement === chart.container;

• 方式3：全局监听全屏变化
  在全局记录全屏状态，方便随时取用：

let isChartFullscreen = false;
// 监听各类全屏变化事件
['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'msfullscreenchange'].forEach(eventName => {
  document.addEventListener(eventName, () => {
    isChartFullscreen = [
      document.fullscreenElement,
      document.webkitFullscreenElement,
      document.mozFullScreenElement,
      document.msFullscreenElement
    ].includes(chart.container);
  });
});

如果选择用render事件方案，可结合状态判断实现图标动态管理：

chart.events.render = function() {
  const isFullscreen = this.container.classList.contains('highcharts-fullscreen-container');
  if (isFullscreen) {
    const plotRight = this.plotLeft + this.plotWidth;
    yourCloseIcon.style.left = `${plotRight - 30}px`;
    yourCloseIcon.style.top = '10px';
    // 确保图标已挂载
    if (!yourCloseIcon.parentNode) document.body.appendChild(yourCloseIcon);
  } else {
    // 退出全屏时移除图标
    if (yourCloseIcon.parentNode) yourCloseIcon.parentNode.removeChild(yourCloseIcon);
  }
};

内容的提问来源于stack exchange，提问作者Roy33