Angular 11中Highstock多折线图范围选择异常问题求助

我在Angular 11环境中使用Highstock构建多折线图时遇到了一个棘手的问题：当所有数据完整加载时图表运行完全正常，但一旦通过底部导航栏选择时间范围，图表就会出现异常显示。目前还没摸清楚问题的根源，希望能得到大家的帮助。

我的实现数据代码： #

var datas = [{ 
    data: [ 
        [1630175400000, 0], [1630089000000, 0.47], [1630002600000, -0.48], 
        [1629916200000, 0.38], [1629829800000, 0.18], [1629743400000, 0.91], 
        [1629657000000, 0.01], [1629570600000, -0.2], [1629484200000, 0.01], 
        [1629397800000, -0.66], [1629311400000, 0.04], [1629225000000, -0.63], 
        [1629138600000, 0.07], [1629052200000, -0.02], [1628965800000, 0], 
        [1628879400000, 0.24], [1628793000000, -0.45], [1628706600000, 0.21], 
        [1628620200000, -0.04], [1628533800000, -0.34], [1628447400000, -0.08], 
        [1628361000000, 0.03], [1628274600000, -0.23], [1628188200000, 0.29], 
        [1628101800000, -0.19], [1628015400000, 0.2], [1627929000000, -0.13], 
        [1627842600000, -0.06], [1627756200000, 0.02], [1627669800000, -0.36] 
    ], 
    id: "base1", 
    name: "Avg. growth rate", 
    type: "line" 
}, { 
    data: [ 
        [1628533800000, 117.442863], [1630175400000, 117.476804], 
        [1630089000000, 117.476804], [1630002600000, 116.930384], 
        [1629916200000, 117.488726], [1629829800000, 117.039701], 
        [1629743400000, 116.834498], [1629657000000, 115.777653], 
        [1629570600000, 115.764878], [1629484200000, 115.996878], 
        [1629397800000, 115.988679], [1629311400000, 116.764601], 
        [1629225000000, 116.7125], [1629138600000, 117.458283], 
        [1629052200000, 117.377938], [1628965800000, 117.395677], 
        [1628879400000, 117.395677], [1628793000000, 117.116852], 
        [1628706600000, 117.64148], [1628620200000, 117.392843], 
        [1628533800000, 117.442863], [1628447400000, 117.841829], 
        [1628361000000, 117.933245], [1628274600000, 117.902974], 
        [1628188200000, 118.170114], [1628101800000, 117.826993], 
        [1628015400000, 118.045463], [1627929000000, 117.811225], 
        [1627842600000, 117.968985], [1627756200000, 118.045426], 
        [1627669800000, 118.024255] 
    ], 
    id: "base2", 
    name: "IN (GBP)", 
    type: "line" 
}]

我整理的几个可能排查方向： #

• 检查数据排序规则：Highstock要求数据必须按时间戳升序排列，我注意到第一个系列的第一条数据时间戳是1630175400000，比后面的1630089000000大，属于降序排列，这很可能在范围选择时导致数据处理异常。建议先把两个系列的数据都按时间戳从小到大排序后再测试。
• 验证版本兼容性：Angular 11对应的Highstock版本是否存在已知的范围选择bug，可以去官方文档或GitHub issues里确认下类似问题。
• 排查自定义事件处理：如果有自定义范围选择的回调函数，可能是逻辑出错导致异常，可以暂时移除自定义逻辑，测试默认行为是否正常。
• 查看控制台报错：选择范围时打开浏览器开发者工具，看看有没有JS错误或警告，这些信息往往能直接定位问题根源。

感谢各位的帮助！

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