Highcharts React全屏模式下菜单按钮文本未切换问题：无法从‘查看全屏’变为‘退出全屏’

我之前也遇到过类似的小坑，结合你提供的代码来看，大概率是自定义的load事件干扰了Highcharts内部的全屏状态同步逻辑，下面给你拆解问题和解决思路：

问题根源分析 #

你在exporting.chartOptions.chart.events里定义了load事件，但这个配置是Highcharts专门用于导出图片/PDF时的临时图表配置。而全屏模式下，Highcharts会复用这个配置创建新的图表实例（或重写当前容器配置），你的自定义load事件覆盖了内部用于同步全屏状态和按钮文本的逻辑，导致按钮无法根据isFullscreen状态自动切换文本。

具体解决步骤 #

1. 把自定义逻辑移到主图表的load事件 #

将创建水印、自定义标签的代码从exporting配置中移除，放到基础图表配置的chart.events.load里，这样既不会干扰导出/全屏的内部逻辑，又能保证自定义效果正常生效：

修改你的基础配置OPTIONS：

import { WATERMARK } from "constants/chartCommons";
export const OPTIONS: Highcharts.Options = {
  chart: {
    className: "IndividualPositioningChart",
    type: "scatter",
    spacing: [0, 0, 0, 0],
    events: {
      load: function(this: Highcharts.Chart) {
        // 这里放置你的自定义标签和水印逻辑
        chartAxesTitles.current.forEach((element) => {
          const { args, attr, css } = element.svg.userOptions;
          const newArgs = [args[0], element.svg.x, element.svg.y];
          createLabel(this.renderer, { args: newArgs, attr, css });
          renderWatermarkLabels(this, true);
        });
      }
    }
  },
  // ... 其他原有配置（credits、title、xAxis等保持不变）
};

然后在useEffect中移除exporting里的chartOptions配置：

useEffect(() => {
  const chart = chartRef?.current?.chart;
  if (!chart?.renderer) return;
  setChartOptions(({ chart, credits, legend, xAxis, yAxis, plotOptions, ...currentOptions }) => ({
    ...currentOptions,
    chart: {
      ...chart,
      ...chartExtraOptions.current?.chart,
    },
    credits: {
      ...credits,
      position: {
        ...credits?.position,
        ...chartExtraOptions.current?.credits.position,
      },
    },
    legend: {
      ...legend,
      ...chartExtraOptions.current?.legend,
    },
    xAxis: {
      ...xAxis,
      ...chartData?.xAxis,
      title: { text: undefined },
      plotLines: [
        {
          value: ((chartData?.xAxis?.max ?? 0) + (chartData?.xAxis?.min ?? 0)) / 2,
          color: "#84acbc",
        },
      ],
    },
    yAxis: {
      ...yAxis,
      ...chartData?.yAxis,
      title: { text: undefined },
      plotLines: [
        {
          value: ((chartData?.yAxis?.max ?? 0) + (chartData?.yAxis?.min ?? 0)) / 2,
          color: "#84acbc",
        },
      ],
    },
    series: chartData?.series,
    // 清空exporting中的自定义chart配置，恢复默认逻辑
    exporting: {},
  }));

2. 手动监听全屏状态（可选兜底方案） #

如果第一步修改后问题仍存在，可以手动监听Highcharts的fullscreen事件，强制更新按钮文本：

在基础配置的chart.events中添加fullscreen事件：

chart: {
  // ... 原有配置
  events: {
    load: function(this: Highcharts.Chart) {
      // 自定义逻辑...
    },
    fullscreen: function(this: Highcharts.Chart, e: { isFullscreen: boolean }) {
      // 找到全屏按钮（根据你的语言配置调整data-menu-item的值）
      const fullscreenBtn = this.exportSVGElements.find(el => 
        el.attr('data-menu-item') === 'Fullscreen' || el.attr('data-menu-item') === '全屏'
      );
      if (fullscreenBtn) {
        // 切换按钮文本
        fullscreenBtn.attr({
          text: e.isFullscreen ? '退出全屏' : '查看全屏'
        });
      }
    }
  }
}

3. 检查并升级Highcharts版本 #

如果你的Highcharts版本比较旧（比如v9及以下），可能存在全屏按钮文本不更新的已知bug，建议升级到最新稳定版（v10+），这类小问题在新版本中基本都已修复。

验证效果 #

修改完成后，点击“查看全屏”进入全屏模式，按钮文本应该会自动切换为“退出全屏”，点击后退出全屏，文本也会切回“查看全屏”，同时你的自定义水印和标签逻辑依然正常工作。

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