我知道这个主题在Stackoverflow上有点反复出现,但是在搜索了很多帖子之后,我还没有找到解决我的问题的方法。
我有一个柱形图,可以有一个或多个列。列必须有一个固定的,并从左边开始。为了符合客户批准的模型,列之间的空间必须是每列宽度的1. 5倍。
我创建了一个fiddle来复制我目前拥有的。我尝试使用pointPadding和groupPadding,但除非我设置pointWidth,否则列不符合模型。
如何设置列之间的距离?
以下是当前配置:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
maxPadding: 0,
minPadding: 0,
lineWidth: 0,
tickWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr'],
labels: {
align: 'center',
reserveSpace: true
}
},
yAxis: {
max: 399.71,
lineWidth: 0,
lineColor: 'transparent',
gridLineWidth: 0,
minorGridLineWidth: 0,
labels: {
enabled: false
},
plotLines: [{
value: 77.28,
color: '#A8AEB7',
label: {
x: 0,
formatter: function () {
return '<span style=color:#616771;>Média</span><br/>77.28'
},
align: 'left',
style: {
color: '#A8AEB7'
}
},
}]
},
tooltip: {
backgroundColor: '#353C47',
borderColor: '#353C47',
shadow: false,
style: {
color: '#ffffff',
fontSize: '10px'
}
},
plotOptions: {
series: {
pointWidth:25,
pointPadding: 0,
borderWidth: 0,
borderRadius: 13,
point: {
events: {
mouseOver: function() {
this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x].style='font-weight:bold';
},
mouseOut: function() {
this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x].style='font-weight:normal';
}
}
}
}
},
series: [{
data: [-48.54,279.92, -321.99,399.71]
}]
});
https://jsfiddle.net/marioandrade/L2u4pkxm/16/
作为对塞巴斯蒂安Wdzel评论的回答,理想的布局应该是这样的,列数是动态的,在1到12之间,但总是从左边开始,列间距与图中所示的相同。添加空列或值为零的列对客户来说是不可接受的。
1条答案
按热度按时间9njqaruj1#
根据塞巴斯蒂安的评论,我设法得到了以下答案:
我创建了一个小提琴与此实现。希望它可以有帮助。https://jsfiddle.net/marioandrade/L2u4pkxm/29/
但是,如果你有其他可能的解决方案,请分享它们。