时间戳

首页 > 解决方案 > 在 Highcharts 包装气泡外圈上显示 dataLabels 或工具提示

highcharts - 在 Highcharts 包装气泡外圈上显示 dataLabels 或工具提示

问题描述

如何显示外圈的数据标签或工具提示packedbubble？

例如，在全球碳排放（2014 年）样本中，当悬停在每个大陆上时，我需要显示每个大陆的工具提示。或者如果可能的话，为每个人显示数据标签

标签： highcharts

解决方案

请注意，外圈只是一条没有任何属性（如 x、y 等）的路径，因此它不适用于 Highcharts 工具提示功能。我想到的唯一解决方案是在此路径上的鼠标悬停事件上创建自定义工具提示。

演示：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"
        }
      }
    }

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

推荐阅读