Highcharts技术问询：已知全局禁用图例方法，如何仅隐藏选中图例？

嗨，我来帮你解决这个Highcharts图例的问题～

首先你提到的 legend: { enabled: false } 确实会把整个图例栏都隐藏，但如果想只隐藏特定的某个/某几个图例项，有两种实用的方法：

1. 初始化图表时直接隐藏指定图例项 #

每个数据系列（series）都支持单独配置是否显示对应的图例项，只需要给目标系列加上 showInLegend: false 即可。比如：

Highcharts.chart('container', {
  series: [
    {
      name: '销量数据',
      data: [120, 180, 240],
      showInLegend: true // 默认显示，可省略该配置
    },
    {
      name: '库存数据',
      data: [80, 100, 90],
      showInLegend: false // 这个系列的图例项会被隐藏
    }
  ]
});

这种方式适合在图表加载前就确定好要隐藏哪些图例项的场景。

2. 动态隐藏/显示选中的图例项 #

如果需要在图表渲染完成后，通过交互（比如点击按钮、或者图例自身的点击操作）来动态调整图例项的显示，可以借助Highcharts的API实现：

• 先找到目标系列对象：可以通过 chart.get('系列ID')（如果给series设置了id）或者遍历 chart.series 数组匹配系列名称。
• 修改该系列的 showInLegend 属性，调用 update 方法后图表会自动重绘。

举个点击按钮隐藏指定图例的例子：

// 假设图表实例已经保存在chart变量中
document.getElementById('hide-stock-legend').addEventListener('click', function() {
  const targetSeries = chart.series.find(s => s.name === '库存数据');
  if (targetSeries) {
    targetSeries.update({
      showInLegend: false
    });
    // update方法默认会触发重绘，无需手动调用chart.redraw()
  }
});

另外你提到的“当图例未激活时设置enabled=false”——如果是指某个图例项对应的系列被禁用（比如点击图例项隐藏了系列）时，同时隐藏该图例项，那可以监听图例的 legendItemClick 事件：

Highcharts.chart('container', {
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          // 切换系列可见性后，隐藏该图例项
          this.update({
            showInLegend: false
          });
          // 如果要阻止默认的系列隐藏行为，可以返回false
          // return false;
        }
      }
    }
  },
  series: [...]
});

需要注意的是，全局的 legend.enabled 是控制整个图例区域的显示/隐藏，而每个series的 showInLegend 是单独控制对应图例项的显示，二者是独立生效的哦～

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