条形图-高位图-堆积条形图-可能具有与数据间隔相对应的标签间隔

Question

我用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'
                        }
                    }
                }]
            });
       });

Answer 1

问题是您使用的是stacking: 'percent'
将其更改为'normal'。

演示