我用 Highcharts 生成了一个堆积条形图,但标签之间的间隔有问题。
我的数据间隔仅为 6,highchart 生成的标签间隔为 100,请参见此处的演示:http: //jsfiddle.net/NjaEw/2/
我想要一个与数据相对应的标签间隔。
这里的代码:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<h1>Testing</h1>
<div id="conformity-by-page" style="width: 100%; height:250px; margin: 0 auto"></div>
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'conformity-by-page',
type: 'bar',
borderWidth: 1,
borderColor: '#000',
borderRadius: 0,
marginTop: 50
},
exporting: {
enabled: false
},
title: {
text: ''
},
xAxis: {
lineWidth:5,
categories: ['Web site'],
//tickWidth: 0,
title: {
text: null
},
labels: {
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
}
}
},
yAxis: {
lineWidth:0,
title: {
text: 'Number of page',
align: 'high',
style: {
color: '#000000',
fontSize: '16px'
}
},
labels: {
overflow: 'justify',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
}
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' règles';
},
backgroundColor: '#FFFFFF',
style: {
color: '#000',
fontSize: '14px',
padding: '5px'
}
},
plotOptions: {
bar: {
borderColor: '#000000',
borderWidth: 1,
/*minPointLength: 10,*/
pointWidth: 25,
stacking: 'percent',
dataLabels: {
enabled: true
}
}
},
legend: {
verticalAlign: 'top',
backgroundColor: '#FFFFFF',
reversed: true,
shadow: true,
symbolWidth: 50,
itemStyle: {
color: '#000000',
fontSize: '15px'
}
},
credits: {
enabled: false
}, series: [{
name: 'Warning',data: [null], color: '#FFFF40',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}, {
name: 'Error',data: [3], color: '#FF8080',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}, {
name: 'N/A',data: [1], color: '#B5EBFB',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}, {
name: 'OK',data: [2], color: '#80FF80',
dataLabels: {
style: {
fontSize: '15px',
color: '#000000'
}
}
}]
});
});