Angular Highcharts堆叠柱状图：禁用悬停与单条选择问题

一、彻底禁用图表悬停效果 #

如果之前配置没生效，大概率是遗漏了部分层级的设置，需要从三个维度同时配置：

1. 关闭系列的悬停状态：给每个series添加states.hover.enabled: false，禁用单系列的悬停样式变化
2. 关闭全局柱状图的悬停状态：在plotOptions.column.states.hover中设置enabled: false，统一控制所有柱状图的悬停行为
3. 禁用Tooltip提示：把tooltip.enabled设为false，避免悬停时弹出提示框，彻底消除悬停反馈

示例配置片段：

chartOptions: Highcharts.Options = {
  tooltip: { enabled: false },
  plotOptions: {
    column: {
      states: { hover: { enabled: false } }
    }
  },
  series: [
    {
      name: '系列1',
      data: [10,20,30],
      states: { hover: { enabled: false } }
    },
    // 其他系列同理配置
  ]
}

二、实现单条堆叠柱状图选择功能 #

通过监听点的点击事件，手动管理选中状态，确保每次只有单个堆叠柱被选中：

1. 添加点击事件逻辑：在plotOptions.column.point.events.click中编写处理函数，点击时先清除所有点的选中状态，再切换当前点的选中状态
2. 配置选中样式：在plotOptions.column.states.select中定义选中时的颜色、边框等样式，让选中效果更直观

示例配置片段：

plotOptions: {
  column: {
    stacking: 'normal',
    point: {
      events: {
        click: function() {
          // 清除所有点的选中状态
          this.series.chart.series.forEach(series => {
            series.points.forEach(point => point.setState(null));
          });
          // 切换当前点的选中状态
          this.setState(this.selected ? null : 'select');
        }
      }
    },
    states: {
      select: {
        color: '#7cb5ec',
        borderWidth: 2,
        borderColor: '#000'
      }
    }
  }
}

把上述配置整合到你的Angular组件中，就能满足单条选择或禁用悬停的需求。

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