javascript - 如何使 x 轴刻度线跨越整个条形图？

Question

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

谢谢！

Answer 1

在 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'

            },