Highcharts - 重叠的散点图标签不可读答案

【问题标题】：Highcharts - Overlapping scatterplot labels are not readableHighcharts - 重叠的散点图标签不可读
【发布时间】：2017-04-26 00:56:49
【问题描述】：

我想清楚地显示用 highcharts 制作的散点图的所有数据标签。

我有一个散点图，其中的点可能重叠或非常靠近。默认情况下，highcharts 隐藏任何重叠的标签，但我要求所有标签都可见。我试过设置'allowOverlap：true'。这使所有标签都按我想要的方式显示，但标签并不总是可读的。是否有任何更简洁的方法可以确保所有标签在散点图上可见，或者是否有人能够检测和抵消重叠标签？

JSFiddle 仅显示四个标签中的三个： https://jsfiddle.net/jholwell/vbc58Luh/

Highcharts.chart('container', {
    series: [{
        data: [[1, 1], [1.8, 1.8], [1.9, 1.8], [5, 2]],
        type: 'scatter'
    }],
    plotOptions: {
      scatter: {
        dataLabels: {
            enabled: true,
        }
      }
    }

});

【问题讨论】：

标签： javascript highcharts collision-detection

【解决方案1】：

Highcharts 当前为 doesn't have collision detection for labels，但基于 an answer to a similar question，您可以实现自己的碰撞检测器（此处：staggerDataLabels()）并在图表的 load 和 redraw 事件上运行它：

Highcharts.chart('container', {
  chart: {
    events: {
      load: function() {
        staggerDataLabels(this.series);
      },
      redraw: function() {
        staggerDataLabels(this.series);
      }
    },
  },
  ...
});

function staggerDataLabels(series) {
  ...

https://jsfiddle.net/vbc58Luh/2/

【讨论】：