javascript - 热图 : Get related data of the hovered cell on mouseOver

Question

当用户将鼠标悬停在热图单元格上时，我想使用一些外部 DOM 元素来显示一些信息。

因此，我使用 plotOptions.heatmap.mouseOver 属性来注册我的回调函数。

但是，我在使用返回的数据获取悬停单元格的基础数据时遇到问题 from the event

正如文档所述，this 指的是回调中的完整系列，但我如何知道哪个系列的单元格悬停在上面？ this.points 包含该系列的所有单元格/点，但我如何知道悬停单元格/点的正确索引？这些信息是否在悬停事件中说明？

有人可以帮我解决这个问题并指出我正确的属性吗？

Answer 1

我建议使用 point.events改为 Hook :

plotOptions: {
  series: {
    point: {
      events: {
        mouseOver: function() {
          var chart = this.series.chart;
          if (!chart.lbl) {
            chart.lbl = chart.renderer.label('')
              .attr({
                padding: 10,
                r: 10,
                fill: Highcharts.getOptions().colors[1]
              })
              .css({
                color: '#FFFFFF'
              })
              .add();
          }
          chart.lbl
            .show()
            .attr({
              text: 'x: ' + this.x + ', y: ' + this.y
            });
        }
      }
    },
    events: {
      mouseOut: function() {
        if (this.chart.lbl) {
          this.chart.lbl.hide();
        }
      }
    }
  }
},

样本fiddle使用这个和热图。