如何在HighChart点击事件中修改选中堆叠条形图及折线点颜色

我用HighCharts实现了堆叠条形图与折线图的组合图表，想要实现点击时选中整个堆叠条形组以及对应折线图的数据点，并同步修改它们的颜色。但目前只能修改单个条形的颜色，没法同时改变整组堆叠条形和对应折线点的颜色。

解决方案 #

核心思路是通过点击事件获取当前点的x轴索引，以此匹配同组的所有堆叠条形和对应折线点，统一修改颜色。具体实现步骤：

• 获取当前点击点的x值（对应x轴分类的索引）
• 遍历所有堆叠条形系列（column类型），找到每个系列中x值匹配的点并修改颜色
• 定位折线系列（line类型），修改对应x值的点颜色及标记样式
• 可选：添加选中状态切换逻辑，再次点击同一组恢复默认颜色

修改后的点击事件代码 #

plotOptions: {
  column: {
    stacking: 'normal',
    point: {
      events: {
        click: function() {
          const chart = this.series.chart;
          const targetX = this.x;
          const defaultBarColor = this.series.color;
          const defaultLineColor = chart.series.find(s => s.type === 'line').color;
          const selectedColor = '#ff0000';

          // 判断当前组是否已选中
          const isSelected = this.color === selectedColor;

          // 更新所有堆叠条形点
          chart.series.forEach(series => {
            if (series.type === 'column') {
              const targetPoint = series.points[targetX];
              if (targetPoint) {
                targetPoint.update({
                  color: isSelected ? defaultBarColor : selectedColor
                }, false);
              }
            }
          });

          // 更新对应折线点
          const lineSeries = chart.series.find(s => s.type === 'line');
          if (lineSeries) {
            const linePoint = lineSeries.points[targetX];
            if (linePoint) {
              linePoint.update({
                color: isSelected ? defaultLineColor : selectedColor,
                marker: {
                  fillColor: isSelected ? defaultLineColor : selectedColor
                }
              }, false);
            }
          }

          // 统一重绘图表
          chart.redraw();
        }
      }
    }
  }
}

代码说明 #

• 借助this.x锁定当前点击的x轴分组，确保所有同组元素都被选中
• 批量修改时用update(false)延迟重绘，最后统一redraw()优化性能
• 折线点需要同时修改线条颜色和标记填充色，保证视觉统一
• 加入选中状态判断，支持点击切换选中/取消状态

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