Question

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

我从在渲染的mouseenter类上绑定.highcharts-point-connecting-path事件的方法开始；但是，返回的对象似乎没有任何标识性的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

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

这是我的准则：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 Gantt-在依存路径悬停时显示工具提示

1 个答案: