javascript - Highcharts 甘特图 - 在依赖路径悬停时显示工具提示

Question

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

我从在渲染的 .highcharts-point-connecting-path 类上绑定(bind) mouseenter 事件的方法开始；但是，返回的对象似乎没有任何标识 data 属性来帮助将 mouseenter 对象绑定(bind)到保存工具提示数据的对象。

$('#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