[英]How to make x-axis tickmarks span the entire bar chart?
我正在使用Highcharts来创建条形图。 我需要这个条形图最终看起来像下面的图表,x轴刻度跨越图表的整个宽度:
使用我当前的代码,图表如下所示:
关于如何实现这一目标的任何想法?
而实际代码:HTML:
<div id="q2-bar" class="chart">
</div>
JS:
$('#q2-bar').highcharts({
chart: {
type: 'bar',
backgroundColor:'transparent'
},
title: {
text: ''
},
xAxis: {
categories: ['Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label'],
title: {
text: null
},
tickLength: 500,
lineColor: 'transparent',
labels: {
style: {
color: '#ffffff'
}
}
},
yAxis: {
min: 0,
title: {
text: ''
},
labels: {
overflow: 'justify',
enabled: false
},
gridLineColor: 'transpartent',
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
format: '{y}%',
color: '#ffffff'
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Expenses Covered',
borderWidth: '0',
data: [{
y: 46,
color: '#d70081'
},{
y: 52,
color: '#0099cc'
},{
y: 73,
color: '#75ad01'
},{
y: 47,
color: '#ffcc00'
},{
y: 64,
color: '#ff6600'
},{
y: 60,
color: '#663399'
},{
y: 42,
color: '#00b99c'
},{
y: 51,
color: '#ff0033'
},{
y: 51,
color: '#0099cc'
},{
y: 60,
color: '#d70081'
},{
y: 81,
color: '#ffcc00'
}]
}]
});
谢谢!
在x轴上设置'gridLineWidth'和'gridLineColor'。
xAxis: {
categories: ['Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label', 'Label'],
title: {
text: null
},
tickLength: 500,
lineColor: 'transparent',
labels: {
style: {
color: '#ffffff'
}
},
gridLineWidth:'1px',
gridLineColor:'#FFFFFF'
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.