在Highcharts填充气泡外圈上显示数据标签或工具提示

时间:2019-12-22 17:32:32

标签: highcharts

如何显示packedbubble外圈的dataLabel或工具提示?

例如在Carbon emissions around the world (2014)示例中,当悬停在每个大洲上时,我需要显示每个大洲的工具提示。或尽可能显示每个标签的数据标签

1 个答案:

答案 0 :(得分:1)

请注意,外圆只是一条没有任何属性(如x,y等)的路径,因此不适用于Highcharts工具提示功能。我想到的唯一解决方案是在此路径上的 mouseover 事件上创建自定义工具提示。

演示:https://jsfiddle.net/BlackLabel/9gkdfsnj/

代码:

events: {
      render() {

        var
          chart = this,
          series = chart.series[0],
          graphic = series.parentNode.graphic,
          tooltip = document.getElementById('tooltip'),
          text;

        text = "Sum value: " + Math.floor(series.yData.reduce((a, b) => a + b, 0));

        graphic.element.onmouseover = function() {
          tooltip.style.visibility = "visible";
          tooltip.innerHTML = text;
          tooltip.style.left = graphic.x + (tooltip.offsetWidth /2) - chart.plotLeft + 'px';
          tooltip.style.top = graphic.y + graphic.height / 2 + 'px'
        }

        graphic.element.onmouseout = function() {
          tooltip.style.visibility = "hidden"
        }
      }
    }

这只是一个简单的示例,请随时进行改进。