Highcharts Gantt - 在依赖路径悬停时显示工具提示

Question

我正在尝试找出一种在 Highcharts Gantt 依赖路径上添加悬停工具提示的方法；但不确定最好的方法，因为似乎没有原生配置属性来与依赖路径和端点交互。

我从在呈现的.highcharts-point-connecting-path 类上绑定mouseenter 事件的方法开始；但是，返回的对象似乎没有任何可识别的 data 属性来帮助将 mouseenter 对象与保存工具提示数据的对象联系起来。

$('#gchart-container').on('mouseenter','.highcharts-point-connecting-path',function(event) {
    console.log( this );
});

// returns
// <path fill="none" opacity="1" stroke="#3ABFDA" stroke-width="1" class="highcharts-point-connecting-path highcharts-color-4" d="M 17.5 125.5 L 30.5 125.5 L 30.5 100.5 L 30.5 100.5 L 30.5 25.5 L 17.5 25.5"></path>

由于我已经将所有原始系列数据存储在我的 $data 对象中，如果有一种方法可以将自定义数据属性添加到将显示在 HTML 节点上的系列依赖项中，那么这个解决方案就可以工作。例如。添加自定义属性，如 data-series-id 或其他东西：

// <path fill="none" data-series-id="aa33233dd" opacity="1" stroke="#3ABFDA" stroke-width="1" class="highcharts-point-connecting-path high..... blah blah blah"></path>

然后可以访问$data['aa33233dd'] 以获取适当的信息...理论上。

有什么想法吗？或者有没有更好的方法来做到这一点？

Answer 1

我认为更好的方法是在加载回调中创建此自定义功能，您可以在其中访问整个图表。

这是我的指导方针：https://jsfiddle.net/BlackLabel/1v0oquaf/

代码：

 chart: {
    events: {
      load() {
        let chart = this;

        setTimeout(function() {
          chart.pathfinder.connections[0].pathfinder.group.element.onmouseover = function() {
            console.log(chart)
          }
        }, 100)
      }
    }
  },

我使用 setTimeout 是因为似乎加载函数在路径渲染之前触发。

API：https://api.highcharts.com/gantt/chart.events.load