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

7uzetpgm  于 2022-11-11  发布在  Highcharts
关注(0)|答案(2)|浏览(235)

在那儿!
我有一个网络图建立在highcharts和我需要的数据标签开始关闭一些点。然后,我想打开他们每当用户悬停在一个连接的点。对于这张图片,例如,悬停“里约热内卢”,所有5点连接到它应该有他们的数据标签。
有什么好主意吗?
谢谢你

lvmkulzt

lvmkulzt1#

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

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

kgqe7b3p

kgqe7b3p2#

你没有提供代码,我只能解释可以做什么。我们可以,例如,当用户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/

相关问题