Highcharts热力图：鼠标悬停时如何高亮整列？

可以实现悬停时高亮整列并指定颜色的效果，通过监听热力图的鼠标事件，定位同列数据点并修改其颜色即可。以下是修改后的完整代码：

function formatDate(timestamp) {
  return Highcharts.dateFormat('%Y-%m-%d', timestamp);
}

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },

  xAxis: {
    type: 'datetime',
    min: Date.UTC(2023, 9, 1),
    max: Date.UTC(2023, 9, 5),
    labels: {
      align: 'center'
    }
  },

  yAxis: {
    type: 'datetime'
  },

  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },

  tooltip: {
    formatter: function() {
      return `<b>${formatDate(this.point.x)}</b> sold <br><b>${this.point.value}</b> items on <br><b>${formatDate(this.point.y)}</b>`;
    }
  },

  plotOptions: {
    heatmap: {
      states: {
        hover: {
          enabled: false // 关闭默认单个点的悬停高亮效果
        }
      },
      point: {
        events: {
          mouseOver: function() {
            const currentX = this.x;
            const highlightColor = '#FFFF00'; // 自定义高亮颜色（黄色）
            this.series.points.forEach(point => {
              if (point.x === currentX) {
                // 保存原始颜色，用于移出时恢复
                point.originalColor = point.color;
                point.update({ color: highlightColor }, false);
              }
            });
            this.series.chart.redraw();
          },
          mouseOut: function() {
            const currentX = this.x;
            this.series.points.forEach(point => {
              if (point.x === currentX && point.originalColor) {
                point.update({ color: point.originalColor }, false);
                delete point.originalColor; // 清除临时存储的原始颜色
              }
            });
            this.series.chart.redraw();
          }
        }
      }
    }
  },

  series: [{
    data: [
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 1), 15],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 2), 30],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 3), 45],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 4), 60],
      [Date.UTC(2023, 9, 1), Date.UTC(2023, 9, 5), 75],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 2), 15],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 3), 30],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 4), 45],
      [Date.UTC(2023, 9, 2), Date.UTC(2023, 9, 5), 60],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 2), 0],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 3), 15],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 4), 30],
      [Date.UTC(2023, 9, 3), Date.UTC(2023, 9, 5), 45],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 2), 0],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 3), 0],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 4), 15],
      [Date.UTC(2023, 9, 4), Date.UTC(2023, 9, 5), 30],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 1), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 2), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 3), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 4), 0],
      [Date.UTC(2023, 9, 5), Date.UTC(2023, 9, 5), 15],
    ],
    colsize: 24 * 36e5,
    rowsize: 24 * 36e5,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

关键实现说明 #

• 禁用默认高亮：通过plotOptions.heatmap.states.hover.enabled = false关闭单个点的默认悬停高亮，避免和整列高亮冲突。
• 整列高亮逻辑：在mouseOver事件中获取当前点的x轴值，遍历所有数据点，将同x值的点颜色修改为自定义的黄色（#FFFF00），同时保存每个点的原始颜色。
• 恢复原始颜色：在mouseOut事件中，再次遍历同x值的点，将颜色恢复为之前保存的原始颜色，并清除临时存储的原始颜色数据。
• 日期格式化优化：原代码中getPointCategoryName函数不适用于datetime类型的轴，因此新增formatDate函数，通过Highcharts.dateFormat将时间戳转换为可读日期，优化tooltip显示效果。

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