如下图所示:
重点在这里options3d,alpha:内旋转角度 ,beta:外旋转角度,这两个的值要设置的比较小一点。让3D柱形图直立起来的关键参数是depth,图表的合计深度,默认为100,让depth的值变大一些,例如200,就可以让3D柱形图直立起来
var chart = new Highcharts.Chart({
chart: {
renderTo: 'residentIDColumn',
type: 'column',
backgroundColor: 'transparent',
//重点在这里,alpha和beta要设置的比较小一点,让3D柱形图直立起来的关键参数是depth,图表的合计深度,默认为100,让depth的值变大一些,就可以让3D柱形图直立起来
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 200,
viewDistance: 25
}
},
title: false,
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '{series.name}: {point.y}'
},
legend: {
enabled: false
},
xAxis: {
categories: community,
//crosshair: true,
lineWidth: 10,
gridLineWidth: 0,
labels: {
formatter: function () {
return this.value
},
style: {
color: '#fff',
fontSize: '18px',
fontFamily: '宋体'
}
}
},
yAxis: {
allowDecimals: false,
title: false,
min: 0,
gridLineWidth: 0,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}//去掉刻度数字
},
plotOptions: {
series: {
color: "red",
dataLabels: {
enabled: true
}
},
column: {
depth: 25,
dataLabels: {
enabled: true, //数据显示在柱顶
defer: false,
color: 'white'
}
}
},
series: [{
name: '',
data: communityNum
}]
});