Highcharts气泡图表数据标签重叠

如图所示（与小提琴不一样的代码，但展示了问题），使用Highcharts新的气泡图表，似乎dataLabels喜欢坐在彼此的顶部。有这个简单的解决方法吗？我很乐意为每个标签手动更改z-index，但这似乎不适用于气泡图。下面是未能按预期工作，一些示例代码（尝试在一个fiddle）：Highcharts气泡图表数据标签重叠

series: [{ 
    data: [{ 
     x: 99, 
     y: 36, 
     z: 50 
    }, { 
     x: 99, 
     y: 74, 
     z: 55, 
     dataLabels: { 
      zIndex:15, 
      enabled: true, 
     } 
    }, { 
     x: 99, 
     y: 76, 
     z: 55, 
     dataLabels: { 
      zIndex: 1, 
      enabled: true 
      } 
    } 
    ] 
}],

enter image description here

来源

2013-04-05 AlexMA

您可以设置useHTML: true标志，然后设置z-index: x属性dataLabels，请参阅：http://jsfiddle.net/ZLmU8/4/

来源

2013-04-08 09:56:18

这并不影响z-index的，但它确实使重叠看起来不那么糟糕。尝试更改z-index - 没有任何反应。这由plotOptions.bubble.dataLabels.useHTML的文档支持：“请注意，导出的图像不会尊重HTML，并且HTML不会尊重Z-index设置”。尽管（http://jsfiddle.net/ZLmU8/5/）图表仍然有可能看起来不专业， – AlexMA 2013-04-08 12:52:12

显然，Highcharts点对象上有一个labelrank属性，可用于指定顶部的哪个点标签。

data: [{ 
    x: 1, y: 1, labelrank: 1, name: 'A' 
    },{ 
    x: 1, y: 1, labelrank: 2, name: 'B' 
    }]

或者也可以对单个点进行更新通过做这样的事情，使该点的dataLabel到前面：chart.series[0].points[0].update({labelrank: 3});

我可以当你创建你的数据像这样被使用有一个类似的问题，并创建了this SO问题，只是被回答。

编辑

他们增加了关于series.data.labelrank他们的文档以及信息：http://api.highcharts.com/highcharts#series.data.labelrank

来源

2016-04-13 18:23:21 jbgarr

Highcharts气泡图表数据标签重叠

回答

相关问题