Question

我有一个气泡图，我需要找到重叠气泡的数量，如果特定组中气泡重叠的数量不超过两个，我不需要显示这些气泡的数据标签。相反，我应该在具有文本＆＃34;泡泡计数：＃＆＃34;的特定组上显示标签类型的东西。是否可以使用注释实现相同，或者是否有任何其他方式将标签放在一组气泡上。附上样本img和小提琴以获得更多说明。非常感谢任何及时的帮助。Sample Image

小提琴链接：https://jsfiddle.net/m53tevbq/

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'bubble',
      zoomType: 'xy'
    },
    xAxis: {
      type: 'datetime',
      reversed: true,
      labels: {
        formatter: function() {
          var _dayInMillis = 1000 * 3600 * 24;
          var _backEndVal = this.value; //Value from Backend

          var _curr = new Date(); //getting the current date         
          var _currUTC = Date.UTC(_curr.getUTCFullYear(), _curr.getUTCMonth(), _curr.getUTCDate());

          var _diff = Math.floor((_currUTC - _backEndVal) / _dayInMillis);
          var _noOfYrs = Math.floor(_diff / 365);

          return _noOfYrs + ' Year';
        }
      }
    }
}
})

Answer 1

这样做的一种方法是创建重叠点组，每组只显示一个数据标签（例如，第一点）和定位它正确使用组中所有点的坐标（以便它位于组的中心 - 在代码中标记为TODO。

    load: function() {
      var points = this.series[0].points,
        chart = this;
      points.forEach(function(p) {
        if (!p.group) {
          var overlappingBubbles = getRecursedPoints(p, chart);
          if (overlappingBubbles.length > 1) {
            overlappingBubbles.forEach(function(op, i) {
              op.group = overlappingBubbles;
              if (i > 0) {
                op.update({
                  dataLabels: {
                    enabled: false
                  }
                }, false);
              } else {
                op.update({
                  dataLabels: {
                    enabled: true
                    format: "Overlapped bubbles: " + op.group.length
                      // TODO: compute the offest for the label 
                      // based on coordinates of all points in the group
                      //x: some_value,
                      //y: some_value
                  }
                }, false);
              }
            });
          }
        }
      });
      chart.redraw();
    }

现场演示： https://jsfiddle.net/kkulig/sm1yh5ad/

API参考：

用于在多个点上显示标签的注释

1 个答案: