如何通过HighCharts获取X轴标签与Navigator栏状态保存图表视图

直接给你靠谱的官方方案，完全不用依赖DOM读取，稳定又省心：

1. 直接获取当前X轴可见范围 #

Highcharts Stock自带API可以直接拿到当前视图的X轴极值，用chart.xAxis[0].getExtremes()就行。返回的对象里min和max对应当前视图的起始、结束值：

• 如果你的X轴是categories类型（就像你现在的配置），min和max是categories数组的索引，直接用categoriesX[min]和categoriesX[max]就能拿到对应的时间标签；
• 如果是时间轴（datetime类型），返回的是时间戳，转成日期对象即可。

示例代码：

// 拿到图表实例，两种方式都可以
const chart = Highcharts.getChart('container'); 
// const chart = Highcharts.charts[0];

const extremes = chart.xAxis[0].getExtremes();
const startLabel = categoriesX[extremes.min];
const endLabel = categoriesX[extremes.max];

console.log('当前查看的时间范围：', startLabel, '至', endLabel);

2. 实时监听视图变化（Navigator缩放/移动时自动获取） #

如果要在用户操作Navigator（缩放、拖拽）时自动获取并保存范围，给X轴加个afterSetExtremes事件就行，每次范围变化都会触发：

修改你的图表配置里的xAxis部分：

xAxis: {
    title: {
        text: 'Time (Hrs)'
    },
    categories: categoriesX,
    events: {
        afterSetExtremes: function(e) {
            const startLabel = categoriesX[e.min];
            const endLabel = categoriesX[e.max];
            // 这里可以把范围存到localStorage或者后端，实现状态保存
            localStorage.setItem('chartViewRange', JSON.stringify({start: startLabel, end: endLabel}));
            console.log('视图范围更新：', startLabel, '至', endLabel);
        }
    }
}

3. 别用你现在的jQuery方法 #

你靠DOM元素innerText拿数据的方式太不稳定了——Highcharts的DOM结构随版本更新可能变化，而且还要解析文本，很容易出问题，完全没必要用。

额外建议：换成时间轴更适合跨多日场景 #

你现在用的是categories类型X轴，跨多日的时间序列其实更适合用datetime类型的X轴，Highcharts会自动处理时间格式化、时区，而且获取的极值是时间戳，更方便存储和处理。改起来也简单：

xAxis: {
    type: 'datetime',
    title: {
        text: 'Time'
    },
    labels: {
        format: '{value:%Y-%m-%d %H:%M}' // 自定义显示的时间格式
    },
    events: {
        afterSetExtremes: function(e) {
            const startDate = new Date(e.min);
            const endDate = new Date(e.max);
            console.log('当前范围：', startDate.toLocaleString(), '至', endDate.toLocaleString());
        }
    }
}

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