HighStock堆叠条形图滚动条问题：滚动无数据且返回初始位置Resize报错

我之前处理过类似的Highstock堆叠条形图场景问题，结合你遇到的两个现象——分类数≥100时滚动后无数据、滚动回初始位置调整尺寸报错——给你针对性的解决方案：

问题分析 #

1. 滚动后无数据：当分类数量超过50时，Highstock的滚动条视图范围计算和堆叠数据的渲染逻辑出现冲突，导致滚动后无法正确绘制堆叠条形。
2. 尺寸调整报错：滚动回初始位置后，图表重绘时会尝试访问未定义的堆叠数据数组元素，触发Cannot read property '0' of undefined错误。

解决方案 #

1. 修复滚动后无数据的问题 #

调整x轴和滚动条的配置，避免刻度计算异常和实时重绘的性能压力：

• 给x轴添加startOnTick: false和endOnTick: false，防止滚动时强制对齐刻度导致分类被隐藏；
• 禁用滚动条的liveRedraw，减少大量分类时的计算负载，拖动滚动条时先显示占位，松开后再完成重绘。

2. 修复尺寸调整报错的问题 #

在图表的resize事件中，手动校验x轴的极值范围，避免访问未定义的数组元素：

• 当回到初始位置（x轴min为0，max为最大分类索引）时，手动重新设置极值，确保堆叠数据的数组索引有效。

完整配置示例 #

Highcharts.stockChart('container', {
    chart: {
        type: 'bar',
        events: {
            resize: function() {
                const xAxis = this.xAxis[0];
                // 回到初始位置时，手动重置极值避免数组访问错误
                if (xAxis.min === 0 && xAxis.max === xAxis.dataMax) {
                    xAxis.setExtremes(0, xAxis.dataMax, true, false);
                }
            }
        }
    },
    xAxis: {
        type: 'category',
        startOnTick: false,
        endOnTick: false,
        minPadding: 0,
        maxPadding: 0
    },
    yAxis: {
        stackLabels: {
            enabled: true
        }
    },
    scrollbar: {
        liveRedraw: false
    },
    plotOptions: {
        series: {
            stacking: 'normal',
            pointWidth: 10
        }
    },
    // 你的数据配置（示例为100个分类的堆叠数据）
    series: [
        {
            name: 'Series 1',
            data: Array.from({length: 100}, (_, i) => [i, Math.floor(Math.random() * 100)])
        },
        {
            name: 'Series 2',
            data: Array.from({length: 100}, (_, i) => [i, Math.floor(Math.random() * 100)])
        }
    ]
});

额外说明 #

• 如果你需要保留滚动条的实时预览效果，可以尝试调整scrollbar.rangeSelector.enabled为false，或者优化数据的加载方式（比如分批加载）；
• 确保你的Highstock版本是较新的，部分旧版本存在这类堆叠条形图的滚动bug，升级到最新稳定版也能解决部分问题。

内容的提问来源于stack exchange，提问作者Shashi