在Highcharts图表开发中，时间轴相关的数据处理是核心环节之一，而Epoch时间戳作为常见的时间存储格式，经常需要被转换为Highcharts可识别的毫秒级时间戳。很多开发者拿到后端返回的字符串形式Epoch时间戳时，直接传入图表配置会导致时间显示错误，这主要是因为没有完成正确的格式转换。
Epoch时间戳基础概念
Epoch时间戳指的是从1970年1月1日00:00:00 UTC开始到当前时间的总秒数或者总毫秒数。在前后端交互中，后端常返回字符串格式的秒级Epoch时间戳，比如1693564800这样的字符串，而Highcharts的时间轴默认要求传入的是毫秒级的数值型时间戳，这就是转换的核心需求。
字符串格式Epoch时间戳的问题
如果直接将字符串形式的秒级Epoch时间戳传入Highcharts的xAxis数据，会出现两种常见问题：
- 时间轴显示的时间完全错误，和预期的时间节点不符
- 控制台抛出时间解析相关的警告，图表无法正常渲染时间维度数据
这是因为字符串类型无法被Highcharts的时间解析逻辑正确处理，同时秒级时间戳和毫秒级时间戳存在1000倍的数量级差异。
从字符串到毫秒的完整转换步骤
第一步：解析字符串为数值
首先需要将字符串格式的Epoch时间戳转换为数值类型，JavaScript中可以使用Number()函数或者parseInt()函数完成这个操作。
// 后端返回的字符串形式秒级Epoch时间戳 const epochStr = "1693564800"; // 转换为数值类型 const epochSeconds = Number(epochStr); // 也可以使用parseInt，第二个参数10表示十进制解析 const epochSeconds2 = parseInt(epochStr, 10); console.log(epochSeconds, epochSeconds2); // 输出 1693564800 1693564800
第二步：秒级转毫秒级
因为Highcharts需要的是毫秒级时间戳，所以需要将秒级数值乘以1000，得到对应的毫秒数。
const epochMilliseconds = epochSeconds * 1000; console.log(epochMilliseconds); // 输出 1693564800000
第三步：适配Highcharts配置
将转换后的毫秒级时间戳传入Highcharts的xAxis数据配置中，就可以正确显示时间轴了。下面是一个完整的折线图配置示例：
// 原始字符串形式的时间戳数组
const rawTimeStamps = ["1693564800", "1693651200", "1693737600", "1693824000"];
// 转换后的毫秒级时间戳数组
const formattedTimeStamps = rawTimeStamps.map(item => {
return Number(item) * 1000;
});
// 对应的数据值数组
const dataValues = [120, 150, 130, 180];
// Highcharts配置
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
title: {
text: '时间'
}
},
yAxis: {
title: {
text: '数值'
}
},
series: [{
name: '示例数据',
data: formattedTimeStamps.map((time, index) => {
return [time, dataValues[index]];
})
}]
});
注意事项
- 确认后端返回的Epoch时间戳是秒级还是毫秒级，避免重复乘以1000导致时间错误
- 如果字符串中包含非数字字符，需要先做清洗处理，再执行转换逻辑
- 可以通过
new Date(epochMilliseconds)验证转换后的时间是否正确，再传入Highcharts配置
转换后的时间戳如果验证时显示的时间有偏差，需要检查是否考虑了时区问题，Highcharts默认会按照浏览器本地时区显示时间轴。
HighchartsEpoch_timestampJavaScript数据可视化修改时间：2026-07-05 23:48:09