Highcharts bubble chart dataLabels overlapping

问题

As shown in the picture (which is not the same code as the fiddle, but exhibits the problem), with Highcharts new bubble charts it seems like dataLabels like to sit on top of each other. Is there an easy workaround for this? I'd be happy to manually change the z-index on a per label basis, but this doesn't seem to work for bubble charts. Here's some sample code that fails to work as expected (try it in a fiddle):

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
           }
     }
    ]
}],

回答1:

You can set useHTML: true flag, and then set z-index: x property for dataLabels, see: http://jsfiddle.net/ZLmU8/4/

回答2:

Apparently there is a labelrank property on the Highcharts point objects that can be used to dictate which point labels are on top. It can be used when you're creating your data like this:

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

Or it can be updated on an individual point to bring that point's dataLabel to the front by doing something like this: chart.series[0].points[0].update({labelrank: 3});

I had a similar issue and created this question on SO that just was answered.

Edit

They have added info regarding series.data.labelrank to their docs as well: http://api.highcharts.com/highcharts#series.data.labelrank

来源：https://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlapping

标签

Highcharts