5 javascript css jquery charts highcharts
我正在尝试显示数据标签.但DATALABEL黑色条没有显示.为什么?
其他酒吧显示得很好.我借此机会问我怎样才能提出一个条件?如果该值小于5,则DATALABEL显示在左侧,否则显示在右侧.
$(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"
}]
});
});
Run Code Online (Sandbox Code Playgroud)
Defaulty每个数据标签都有一个填充,当重叠其他标签时,则隐藏.因此,您需要将填充设置为0并将allowOverlap选项设置为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
}
}
}
},
Run Code Online (Sandbox Code Playgroud)