我使用Highcharts构建了一个堆积柱形图,但是dataLabels
存在问题。某些数据标签无法显示。
我创建了一个JSFiddle:http://jsfiddle.net/samsularifin/7gf787vL/1/
这是我的Javascript代码:
$(function () {
$('#ctrend').highcharts({
chart: {
type:'column',
margin: 75,
options3d: {
enabled: false,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: 'Month to Month Rev',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
subtitle: {
text: 'LEVEL',
style: {
fontSize: '18px',
fontFamily: 'Verdana, sans-serif'
}
},
plotOptions: {
column: {
depth: 25
}
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
},
yAxis: {
title: {
text: '(In Bio)'
},
stackLabels: {
useHTML: true,
x: 0,
y:-28,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif',
color:'#722c84',
//textShadow: "1px 1px #000"
},
enabled: true,
formatter: function() {
return Highcharts.numberFormat(this.total, 0);
},
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0.1,
dataLabels: {
enabled: true,
//crop: false,
//overflow: 'none',
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
},
series: {
dataLabels: {
crop: false
}
}
},
tooltip: {
formatter: function() {
return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
}
},
series: [{
name: 'Voice',
data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
index:3,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'SMS',
data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
index:2,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Other',
data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
index:0,
shadow : true,
dataLabels: {
enabled: true,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}, {
name: 'Data',
data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
index:1,
shadow : true,
dataLabels: {
enabled: true,
crop: false,
color: '#fff',
align: 'center',
formatter: function() {
return Highcharts.numberFormat(this.y, 2);
}, // one decimal
y: 0, // 10 pixels down from the top
style: {
fontSize: '9px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
需要帮助!