Highcharts选中菜单项后如何动态修改该菜单项的显示文本

问题根因 #

你写的this.text = xxx不生效，核心是两点：

1. 菜单项点击回调里的this指向当前Highcharts图表实例，根本不是自定义菜单项的配置对象，赋值改不到菜单项的配置上
2. 导出菜单每次展开时，都会从chart.options.exporting.menuItemDefinitions读取配置重新渲染菜单项，改临时属性不会同步到配置源，自然不会生效。

另外你每次点击都调用viewData()会重复生成数据表DOM，也会导致标题设置和显示状态异常。

修复方案 #

直接把菜单项的文本状态维护在图表的导出配置对象上，同时增加判断：只有第一次打开数据表时才调用viewData()生成DOM，后续切换只修改DOM的display属性即可，另外在点击导出按钮展开菜单前，同步一次菜单项文本和当前数据表状态，保证交互和原生菜单一致。

修复后的完整JS代码如下，CSS和页面引入部分不需要改动：

const html = '<div style="display: inline-block"></div>';
html += '<div style="display: inline-block; margin-left: 20px; cursor: pointer;" class="description-title">';
html += '<img style="width: 20px;" src="https://img.icons8.com/ios/500/info--v1.png" alt="Info">';
html += '</div>';

new Highcharts.Chart({
  chart: {
    renderTo: 'chart_1',
    type: 'column',
    height: 350,
    events: {
      load() {
        const chart = this;
        // 点击导出按钮展开菜单前，同步菜单项文本状态
        chart.container.addEventListener('click', (e) => {
          if (e.target.closest('.highcharts-contextbutton')) {
            const isTableVisible = chart.dataTableDiv && chart.dataTableDiv.style.display !== 'none';
            chart.options.exporting.menuItemDefinitions.label.text = isTableVisible ? 'Hide data table' : 'View data table';
          }
        })
      }
    }
  },
  title: {
    text: html,
    useHTML: true,
  },
  xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
  },
  yAxis: {
    title: {
      text: 'Asked'
    }
  },
  series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90],
    color: '#FF0000',
    states: {
      inactive: { enabled: false }
    }
  }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70],
    states: {
      inactive: { enabled: false }
    }
  }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
  }],
  exporting: {
    menuItemDefinitions: {
      label: {
        onclick: function() {
          const chart = this;
          const menuItemConf = chart.options.exporting.menuItemDefinitions.label;
          // 首次点击，数据表DOM未生成
          if (!chart.dataTableDiv) {
            chart.viewData();
            // 注入自定义HTML格式的数据表标题
            chart.dataTableDiv.querySelector(".highcharts-table-caption").innerHTML = html;
            chart.dataTableDiv.style.display = '';
            menuItemConf.text = "Hide data table";
            return;
          }
          // 已生成DOM则切换显示状态
          if (chart.dataTableDiv.style.display !== 'none') {
            chart.dataTableDiv.style.display = 'none';
            menuItemConf.text = "View data table";
          } else {
            chart.dataTableDiv.style.display = '';
            menuItemConf.text = "Hide data table";
          }
        },
        text: "View data table",
      }
    },
    buttons: {
      contextButton: {
        menuItems: ["viewFullscreen", "printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG", "separator", "downloadCSV", "downloadXLS", 'label']
      }
    }
  }
});

实现效果 #

• 菜单项文本会随数据表显示/隐藏状态自动切换，和原生导出菜单交互完全一致
• 数据表标题支持任意自定义HTML格式，和图表标题规则统一
• 不会重复生成数据表DOM，无性能问题
• 原有导出、全屏、打印等原生菜单功能不受影响

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