为什么我的 Highcharts 图形中的 xAxis 标签位置如此奇怪？

Question

我无法正确显示 xAxis 标签。它们看起来像这样：

我试图重现这个in a fiddle，但在那里，它工作正常。

我的代码如下所示：

        $(function () {
            $.get('graph_sea_ice_extent.csv', function(data)
            {
                var chart = new Highcharts.Chart({
                    chart: {
                        renderTo: "div_graph",
                        type: "line",
                        marginLeft: 40
                    },
                    title: {
                        text: "Arctic Sea Ice Extent",
                        align: "center"
                    },
                    xAxis: {
                        labels: {
                            step: 31
                        },
                        tickWidth: 0
                    },
                    yAxis: {
                        title: {
                            text: "Million sq. km",
                            align: "high",
                            rotation: 0,
                            x: 90,
                            y: -20
                        }
                    },
                    legend: {
                      enabled: false  
                    },
                    data: {
                        csv: data  
                    },
                    plotOptions: {
                        series: {
                            connectNulls: true,
                            shadow: false,
                            lineWidth: 1,
                            color: 'rgba(100, 100, 100, 0.2)',
                            marker: {
                                enabled: false
                            }
                        }
                    }
                });
            });
        });

我记得读过一些关于 Highcharts 在过程的太晚阶段读取标签的内容，因此它不知道将它们放在哪里/如何放置。但我不知道可以做些什么来解决这个问题。

感谢任何提示。

Answer 1

ma​​xStaggerLines：数字

当 staggerLines 没有设置时，maxStaggerLines 定义允许轴自动添加的行数 避免重叠 X 标签。设置为 1 以禁用重叠检测。 默认为 5。(docs link)