初始样式:
初始代码 :
var chart = Highcharts.chart('level', {
chart: {
type: 'bar'
},
title: {
text: '楼宇等级'
},
tooltip: {
formatter: function () {
return this.series.name.split(',')[0] + " " + this.series.data[0].y;
}
},
colors: ['#BF58FF', '#8E59FF', '#5E59FE', '#5980FF', '#59BAFF'],
xAxis: {
crosshair: true,
gridLineWidth: 0,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}//去掉刻度数字
},
yAxis: {
allowDecimals: false,
title: false,
gridLineWidth: 0,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}//去掉刻度数字
},
legend: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
formatter: function () {
return this.series.name.split(',')[0] +" " +this.series.data[0].y;
}
}
},
series: {
depth: 25,
cursor: 'pointer',
events: {
legendItemClick: function () {
return false;
}
}
},
},
series: houseLevel
});
想要调整后的样式 :
调整后的代码:
var chart = Highcharts.chart('level', {
chart: {
type: 'bar'
},
title: {
text: '楼宇等级'
},
tooltip: {
formatter: function () {
return this.series.name.split(',')[0] + " " + this.series.data[0].y;
}
},
colors: ['#BF58FF', '#8E59FF', '#5E59FE', '#5980FF', '#59BAFF'],
xAxis: {
crosshair: true,
gridLineWidth: 0,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}//去掉刻度数字
},
yAxis: {
allowDecimals: false,
title: false,
gridLineWidth: 0,
lineWidth: 0,
tickLength: 0,
labels: {
enabled: false
}//去掉刻度数字
},
legend: {
enabled: false
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
allowOverlap: true, // 允许数据标签重叠
formatter: function () {
return this.series.name.split(',')[0] +" " +this.series.data[0].y;
}
}
},
series: {
depth: 25,
重点在下面四个属性,设置不同的值可以出现不同的样式
pointPadding: 0,
groupPadding: 0,
borderWidth: 10,
shadow: false,
cursor: 'pointer',
events: {
legendItemClick: function () {
return false;
}
}
},
},
series: houseLevel
});