在那儿!我有一个网络图建立在highcharts和我需要的数据标签开始关闭一些点。然后,我想打开他们每当用户悬停在一个连接的点。对于这张图片,例如,悬停“里约热内卢”,所有5点连接到它应该有他们的数据标签。有什么好主意吗?谢谢你
lvmkulzt1#
您最初可以创建所有数据标签,但通过将不透明度样式设置为0来隐藏它们。然后,使用mouseOver和mouseOut事件来切换不透明度。
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
kgqe7b3p2#
你没有提供代码,我只能解释可以做什么。我们可以,例如,当用户mouseOver是我们的序列时,我们监听,然后我们把dataLabels enabled转换为那个序列,它是子序列。其他的都得到dataLabels disabled
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/
2条答案
按热度按时间lvmkulzt1#
您最初可以创建所有数据标签,但通过将不透明度样式设置为0来隐藏它们。然后,使用
mouseOver
和mouseOut
事件来切换不透明度。现场演示:https://jsfiddle.net/5n2u1b3L/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.SVGElement#css
kgqe7b3p2#
你没有提供代码,我只能解释可以做什么。我们可以,例如,当用户
mouseOver
是我们的序列时,我们监听,然后我们把dataLabels enabled
转换为那个序列,它是子序列。其他的都得到dataLabels disabled
举个例子:https://jsfiddle.net/fakytqhd/