每当我调整图表大小时，我的代码都将无法工作。
我想以相同的高度显示所有数据标签，但我无法调整它。所有数据标签应高于我在代码中计算的最大高度。最大高度是最大数据值的两倍。请帮助我。
下面是我的 jsfiddle 链接
var i = 0, max = 0, min = 0;
var val = [-6, 5, 10, 4];
var cat = ['Sep-2016', 'Oct-2016', 'Nov-2016', 'Dec-2016'];
var color = ['#f442d4', '#41f4f1', '#4149f4', '#f49a41'];
var fixed = [];
var variable = [];
var val2= new Array();
for( i=0; i<val.length; i++ )
{
var str = {y:0, color: ""};
str.y = val[i];
str.color = color[i];
val2.push(str);
}
for(i=0;val[i];)
{
if(min>val[i])
min=val[i];
if(max<val[i])
max=val[i];
i++;
}
max=2*max;
if(min<0)
min=2*min;
else
min=0;
for( i=0; i<val.length; i++ )
{
if(val[i]<0)
fixed.push(-2);
else
fixed.push(2);
}
for( i=0; i<val.length; i++ )
{
if(val[i]<0)
{
variable.push(min-fixed[i]-val[i]);
}
else
{
variable.push(max-fixed[i]-val[i]-2);
}
}
var seriesData= [{
type: 'areaspline',
color: '#e1e4e8',
data: val,
dataLabels:{
enabled:false
}
}, {
type: 'column',
color: '#bbc1c9',
data: fixed,
dataLabels:{
enabled:false
}
}, {
type: 'column',
color: '#dce0e5',
data: variable,
dataLabels:{
enabled:false
}
}, {
type: 'column',
data: val2,
dataLabels:{
enabled:true,
formatter: function () {
return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";transform:translate(0px,-150px)'>" + this.point.y +"</div></html>";
},
useHTML:true,
}
}]
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
backgroundColor: '#f4f7f7'
},
legend: {
enabled: false
},
xAxis: {
categories: cat,
tickmarkPlacement: 'on',
title: {
enabled: false
},
tickLength: 0
},
yAxis: {
max: max,
min: min,
tickInterval: 2,
labels: {
enabled: false
},
title: {
text: '',
},
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#FFFFFF',
},
series: {
pointWidth: 5,
borderWidth: 0,
stacking: 'normal',
}
},
series: seriesData,
});
注意:最大正值:160，最大负值:-60
如需进一步引用，您可以查看下图
最佳答案
将此行添加到末尾 jQuery('.highcharts-label').css('top','0px');
并更新你的格式化程序
formatter: function () {
return "<html><div style='color:black;width:30px;text-align:center;border-radius:4px;padding-top: 5px; height:25px; background:"+this.point.color+";position:absolute;left:-15px'>" + this.point.y +"</div></html>";
关于javascript - 数据标签位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42553207/