Highcharts气泡图数据标签重叠,尽管z索引

Highcharts气泡图数据标签重叠,尽管z索引,highcharts,labels,overlapping,bubble-chart,Highcharts,Labels,Overlapping,Bubble Chart,我对气泡图有问题。事实上,我有一些点,它们的坐标相同,但名称不同,大小也可能不同(z点)。对于这些点,我有一个重叠的标签。z索引解决方案不起作用() 有人知道这个问题的解决办法吗 我想做一个像饼图一样的标签连接器,但我不知道怎么做 我的代码: $(function () { $('#container').highcharts({ credits: { enabled: false }, chart: {

我对气泡图有问题。事实上,我有一些点,它们的坐标相同,但名称不同,大小也可能不同(z点)。对于这些点,我有一个重叠的标签。z索引解决方案不起作用()

有人知道这个问题的解决办法吗

我想做一个像饼图一样的标签连接器,但我不知道怎么做

我的代码:

$(function () {
    $('#container').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
                    categories:['R0', 'R1', 'R2','R3', 'R4', 'R5', 'R6']
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        plotOptions: {
                    bubble: {
                        dataLabels: {
                            enabled: true,
                            useHTML: true,
                            //inside: false,
                            //y:-10,
                            //overflow: false,
                            //crop: false,
                            style: { textShadow: 'none',fontSize: '10px',color:'black' },
                            formatter: function() {
                                return "<i>" + this.point.name.split(' ').join('<br>') + "</i>";
                            }
                        },
                        tooltip : {
                                            headerFormat: '<b>{series.name}</b><br>',
                                            pointFormat : 'S : <i>{point.name}</i><br>Y : {point.y}<br>Num : {point.z}'

                                        }
                    }
                },
        series: [
            {
            name:  'Sample1',
            marker: { fillColor: '#89A54E' },
            data: [
            { name:'A',x:2,y:0.0,z:47},
            { name:'Z',x:3,y:1.0,z:35},
            { name:'E',x:4,y:0.5,z:9},
            { name:'R',x:0,y:1.0,z:34},
            { name:'T',x:3,y:0.0,z:37},
            { name:'T',x:2,y:0.0,z:22},
            { name:'p',x:0,y:1.0,z:39},
            { name:'m',x:2,y:0.5,z:47},
            { name:'h',x:0,y:0.5,z:48},
            { name:'l',x:5,y:1.0,z:25},
            ]
            },
            {
            name:  'Sample2',
            marker: { fillColor: '#92A8CD' },
            data: [
            { name:'AB',x:2,y:0.5,z:23},
            { name:'CA',x:6,y:0.5,z:19},
            { name:'OP',x:3,y:0.5,z:21},
            { name:'CP',x:1,y:0.75,z:38},
            { name:'TS',x:3,y:1.0,z:13},
            { name:'SP',x:0,y:1.0,z:43},
            { name:'SE',x:4,y:1.0,z:2},
            { name:'CS',x:6,y:0.5,z:48},
            { name:'CL',x:1,y:0.5,z:5},
            { name:'H',x:1,y:0.0,z:11},
            ]
            }
        ]
    });
});
$(函数(){
$(“#容器”)。高图({
学分:{
已启用:false
},
图表:{
类型:'气泡',
zoomType:'xy'
},
标题:{
文本:“”
},
副标题:{
文本:“”
},
xAxis:{
类别:['R0','R1','R2','R3','R4','R5','R6']
},
亚克斯:{
标题:{
文本:“”
}
},
打印选项:{
气泡:{
数据标签:{
启用:对,
是的,
//里面:假,,
//y:-10,
//溢出:错误,
//作物:假,
样式:{textShadow:'none',fontSize:'10px',颜色:'black'},
格式化程序:函数(){
返回“+this.point.name.split(“”).join(“
”)+”; } }, 工具提示:{ headerFormat:“{series.name}
”, pointFormat:'S:{point.name}
Y:{point.Y}
Num:{point.z}' } } }, 系列:[ { 名称:“样本1”, 标记:{fillColor:'#89A54E'}, 数据:[ {name:'A',x:2,y:0.0,z:47}, {name:'Z',x:3,y:1.0,Z:35}, {name:'E',x:4,y:0.5,z:9}, {name:'R',x:0,y:1.0,z:34}, {name:'T',x:3,y:0.0,z:37}, {name:'T',x:2,y:0.0,z:22}, {name:'p',x:0,y:1.0,z:39}, {name:'m',x:2,y:0.5,z:47}, {name:'h',x:0,y:0.5,z:48}, {name:'l',x:5,y:1.0,z:25}, ] }, { 名称:“样本2”, 标记:{fillColor:'#92A8CD'}, 数据:[ {名称:'AB',x:2,y:0.5,z:23}, {name:'CA',x:6,y:0.5,z:19}, {name:'OP',x:3,y:0.5,z:21}, {name:'CP',x:1,y:0.75,z:38}, {name:'TS',x:3,y:1.0,z:13}, {name:'SP',x:0,y:1.0,z:43}, {name:'SE',x:4,y:1.0,z:2}, {name:'CS',x:6,y:0.5,z:48}, {name:'CL',x:1,y:0.5,z:5}, {name:'H',x:1,y:0.0,z:11}, ] } ] }); });
显然,Highcharts point对象上有一个
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})

我有一个类似的问题,并创建了一个问题,所以刚刚得到了回答

编辑


他们已经更新了他们的文档,包括
series.data.labelrank

如果你将useHTML设置为false,Highcharts可以隐藏重叠的数据标签,但是如果你想保留所有标签,那么也许简单地将所有标签从一个系列向上移动一点,从secon向下移动一点就可以解决你的问题?示例:我使用了一个三维散点图,因为通过更改Z索引和半径设置大小,最容易看到数据标签。但非常感谢。您可以随时禁用重叠功能,请参阅。