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

Question

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

我开始使用在呈现的 .highcharts-point-connecting-path class 上绑定 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

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

Highcharts Gantt - Show Tooltip on Dependency Path Hover

javascript

highcharts

gantt-chart

highcharts-gantt