本文介绍了数据标签不显示Highcharts的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图展示数据标签。但DATALABEL黑色栏未显示。为什么？
p>
其他栏显示正常。我借此机会问我该如何提出一个条件？如果值小于5，则DATALABEL显示在左侧，否则显示右侧。
$（function（）{
$（'＃container'）。highcharts（{
图表：{
type：'bar'
}，
title：{
text： 'Mi EPS'
}，
xAxis：{
//类别：[number1，number2，number3，number4，number5]，
标题：{
text：null
}，
标签：{
// align：'center'，
x：-5，
y：-20，
useHTML：true，
format：'< div style =position：absolute; left：40px>我的labelL非常大******** ******************************* this in line！< / div>< img style =height：30px ; width：30px; margin-top：10pxsrc =https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png>< / img>'
}
}，
yAxis：{
title：{
text：'Resultado'，
align：'right'
}
}，
tooltip：{
valueSuffix：'dollars'
}，
plotOptions：{
bar：{
dataLabels：{
enabled：true，
align：'left'，
color：'#FFFFFF'，
inside：true，
crop：false，
overflow：none，
formatter：function（）{
return this.series.name ++ this .Y;
console.log（this.series.name）;
}，
style：{
width：100
}
}
}
}，
legend ：{
layout：'vertical'，
align：'center'，
verticalAlign：'bottom'，
x：-40，
y：40，
浮动：true，
borderWidth：1，
backgroundColor：'#FFFFFF'，
shadow：true
}，
credits：{
enabled：假
}，
系列：[{
名称：'Mejor Eps'，
数据：[1000,950,920,880,850]，
颜色：＃FF0000
$ b名称：'Peor Eps'，
数据：[600,540,535,500,0]，
颜色：＃00FF00
}]
}）;
}）;
解决方案
默认每个datalabel都有一个填充符，然后隐藏起来。因此，您需要将设置为0和选项为true。
plotOptions：{
bar：{
dataLabels：{
padding：0，
allowOverlap：true，
enabled：true，
align：'left'，
color：'#FFFFFF'，
inside：true，
crop：false，
overflow：none，
formatter：function（）{
return this.series.name ++ this.y;
console.log（this.series.name）;
}，
style：{
width：100
}
}
}
}，
I'm trying to show datalabels. but DATALABEL the black bar is not shown. why?
other bars are displayed well. I take this opportunity to ask how I can put a condition ?. if the value is less than 5, the DATALABEL be shown to the left, otherwise the right.
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Mi EPS'
},
xAxis: {
//categories: ["number1", "number2", "number3", "number4","number5"],
title: {
text: null
},
labels: {
// align: 'center',
x: -5,
y: -20,
useHTML: true,
format: '<div style="position: absolute; left: 40px"> my labelL is very large ***************************************this in other line! </div> <img style="height: 30px; width: 30px; margin-top: 10px" src="https://cdn2.iconfinder.com/data/icons/free-3d-printer-icon-set/512/Plastic_model.png"></img>'
}
},
yAxis: {
title: {
text: 'Resultado',
align: 'right'
}
},
tooltip: {
valueSuffix: ' dollars'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
align: 'left',
color: '#FFFFFF',
inside: true,
crop: false,
overflow:"none",
formatter: function() {
return this.series.name+ " "+ this.y;
console.log(this.series.name);
},
style:{
width:100
}
}
}
},
legend: {
layout: 'vertical',
align: 'center',
verticalAlign: 'bottom',
x: -40,
y:40 ,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Mejor Eps',
data: [1000, 950,920,880,850],
color: "#FF0000"
}, {
name: 'Mi Eps',
data: [800,770,750,740,730],
color: "#000000"
}, {
name: 'Peor Eps',
data: [600,540,535,500,0],
color: "#00FF00"
}]
});
});
解决方案
Defaulty each datalabel has a padding and when overlaps other label then is hidden. So you need to set padding as 0 and allowOverlap option as true.
plotOptions: {
bar: {
dataLabels: {
padding:0,
allowOverlap:true,
enabled: true,
align: 'left',
color: '#FFFFFF',
inside: true,
crop: false,
overflow:"none",
formatter: function() {
return this.series.name+ " "+ this.y;
console.log(this.series.name);
},
style:{
width:100
}
}
}
},
这篇关于数据标签不显示Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！