悬停时的 Highcharts 网络图数据标签

Question

有！

我有一个建立在 highcharts 上的网络图，我需要数据标签来开始为某些点打开。然后，我想在用户悬停连接点时打开它们。例如，对于这张图片，在悬停“里约热内卢”时，与其相连的所有 5 个点都应该有它们的数据标签。

关于如何做到这一点有什么想法吗？

谢谢

Answer 1

你没有提供任何代码我只能解释可以做什么。例如，我们可以在用户 mouseOver 是我们的系列时收听，然后我们为该系列及其子系列转 dataLabels enabled。其他一切都得到 dataLabels disabled

series: {
            stickyTracking: true,
            events: {
                mouseOver: function () {
                  var hoverSeries = this;                                      

                  this.chart.series.forEach(function(s){
                    if(s != hoverSeries) {
                      // Turn off other series labels
                      s.update({ 
                        dataLabels: {
                          enabled: false
                        }
                      });                          
                    } else {
                      // Turn on hover series labels
                      hoverSeries.update({ 
                        dataLabels: {
                          enabled: true
                        }
                      });                        
                    }
                  });                                        
                },
                mouseOut: function () {                    
                  this.chart.series.forEach(function(s){
                    // Reset all series
                    s.setState('');
                    s.update({
                      dataLabels: {
                        enabled: true
                      }
                    });                          
                  });                         
                }
            }
        }

一些例子：https://jsfiddle.net/fakytqhd/

Answer 2

您最初可以创建所有数据标签，但通过将不透明度样式设置为 0 来隐藏它们。然后，使用 mouseOver 和 mouseOut 事件来切换不透明度。

const toggleDLInLinks = (links, isVisible) => {
    links.forEach(link => {
        if (isVisible) {
            link.toNode.dataLabel.css({
                opacity: 1
            })
        } else {
            link.toNode.dataLabel.css({
                opacity: 0
            })
        }

        if (link.toNode.linksFrom.length) {
            toggleDLInLinks(link.toNode.linksFrom, isVisible);
        }
    });
};

Highcharts.chart('container', {
    plotOptions: {
        networkgraph: {
            ...,
            dataLabels: {
                allowOverlap: true,
                enabled: true,
                style: {
                    opacity: 0,
                    transition: ''
                }
            },
            point: {
                events: {
                    mouseOver: function() {
                        const point = this;

                        if (point.linksFrom.length) {
                            toggleDLInLinks(point.linksFrom, true);
                        }
                    },
                    mouseOut: function() {
                        const point = this;
                        if (point.linksFrom.length) {
                            toggleDLInLinks(point.linksFrom);
                        }
                    }
                }
            },
            keys: ['from', 'to']
        }
    },
    ...
});

现场演示： https://jsfiddle.net/5n2u1b3L/

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGElement#css

悬停时的 Highcharts 网络图数据标签

Highcharts networkgraph datalabels on hover

highcharts

angular