实现Highcharts SolidGauge灰色区域悬停时的面板高亮

我在Angular 10和13中使用Highcharts SolidGauge实现环形进度图，现有代码仅能在悬停彩色区域时触发对应面板高亮、其余面板变暗。我需要实现悬停彩色区域或灰色区域时，均能触发对应环形面板的高亮效果。目前已通过以下代码实现灰色区域悬停时的tooltip功能，咨询需修改哪些内容达成高亮需求：

events: {
            load() {
              let chart = this,
                panes = chart.pane[0].background,
                points = [chart.series[0].points[0], chart.series[1].points[0], chart.series[2].points[0], chart.series[3].points[0], chart.series[4].points[0]];
              if (panes.length > 5) {
                const rtdPoints = [chart.series[5].points[0], chart.series[6].points[0]]
                points.push(...rtdPoints);
              }

              for (let i = 0; i < panes.length; i++) {
                panes[i].element.onmouseover = function () {
                  chart.tooltip.hide();
                  chart.tooltip.refresh(points[i]);
                  points[i].setState('hover');
              }

              panes[i].element.onmouseout = function () {
                  chart.tooltip.hide();
                  points[i].setState('');
              }
              }
              const renderer = chart.renderer;
              
            }
          }
        },

修改方案 #

当前代码仅对单个点设置hover状态，未模拟原生高亮时其余面板变暗的逻辑。调整鼠标悬停和移出的事件处理逻辑即可实现需求：

1. 悬停灰色区域时，遍历所有数据点：将当前对应点设为hover状态，其余点设为inactive状态（对应变暗效果）
2. 鼠标移出时，重置所有数据点的状态，恢复初始显示

调整后的完整events.load代码如下：

events: {
  load() {
    let chart = this,
      panes = chart.pane[0].background,
      points = [chart.series[0].points[0], chart.series[1].points[0], chart.series[2].points[0], chart.series[3].points[0], chart.series[4].points[0]];
    if (panes.length > 5) {
      const rtdPoints = [chart.series[5].points[0], chart.series[6].points[0]]
      points.push(...rtdPoints);
    }

    for (let i = 0; i < panes.length; i++) {
      panes[i].element.onmouseover = function () {
        chart.tooltip.hide();
        chart.tooltip.refresh(points[i]);
        // 模拟原生高亮效果：当前点hover，其余点变暗
        points.forEach((point, idx) => {
          point.setState(idx === i ? 'hover' : 'inactive');
        });
      }

      panes[i].element.onmouseout = function () {
        chart.tooltip.hide();
        // 重置所有点状态
        points.forEach(point => point.setState(''));
      }
    }
    const renderer = chart.renderer;
  }
}

说明 #

• 新增的遍历逻辑让灰色区域悬停时的效果和彩色区域悬停完全一致，实现了统一的高亮交互
• inactive状态是Highcharts内置的状态，对应非选中面板变暗的样式，无需额外自定义CSS

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