Highcharts气泡图数据标签尽管z-索引重叠 [英] Highcharts bubble chart dataLabels overlapping despite z-index
问题描述
我有一个气泡图的问题。事实上，我有一些点具有相同的坐标不同的名称，也许不同的大小（z点）。对于这些点，我有一个标签叠加。 z-index解决方案无效（ https://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlappinghttps://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlapping ）。
有谁知道这个问题的解决方案吗？
我想做一个像饼图这样的标签连接器，但我不知道该怎么做。
我的代码：
$（function（）{
$（'＃container'）。highcharts（{
credits：{
enabled：false
}，
图表：{
type：'bubble'，
zoomType：'xy'
}，
标题：{
text：''
}，
字幕：{
text：' '
}，
xAxis：{
categories：['R0'，'R1'，'R2'，'R3'，'R4'，'R5'，'R6']
}，
yAxis：{
title：{
text：''
}
}，
plotOptions：{
bubble ：{
dataLabels：{
启用：true，
useHTML：true，
//里面：false，
// y：-10，
//溢出：false，
//裁剪：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}'
}
}
}，
系列：[
{
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}，
{名称：'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' 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}，
]
}
]
}）;
}）;
显然有一个 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 以及： http://api.highcharts.com/highcharts#series.data.l abelrank
I have a problem with the bubble chart. In fact, i have some points which have the same coordinates with a different name and maybe a different size (z point). For these points, i have a superposition of labels. The z-index solution doesn't work (https://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlappinghttps://stackoverflow.com/questions/15843238/highcharts-bubble-chart-datalabels-overlapping).
Does anyone know of any solution to this problem ?
I thought to do a label connector like the pie chart but i do not how to do.
My code :
$(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},
]
}
]
});
});
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 updated their docs to include series.data.labelrank as well: http://api.highcharts.com/highcharts#series.data.labelrank
这篇关于Highcharts气泡图数据标签尽管z-索引重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
