Highcharts x-range使用带引号的Date.UTC作为起止日期时图表不显示

问题根因 #

• Highcharts x-range 类型图表的x、x2字段要求接收数值类型的UTC时间戳，你为Date.UTC(...)外层套双引号后，字段值变为普通字符串，Highcharts无法将其识别为有效时间维度值，因此无法正常渲染范围区间。
• 你尝试用Date.parse处理无效的原因：Date.parse仅能识别符合ISO 8601规范的日期字符串（如"2018-09-18"），无法解析"Date.UTC(2018, 8, 18)"这类JS代码格式的字符串。

修复方案 #

场景1：前端直接编写静态配置 #

直接删除x、x2值外层的双引号即可，Date.UTC()执行后会直接返回符合要求的数值型时间戳：

{
  "x": Date.UTC(2018, 8, 18),
  "x2": Date.UTC(2023, 6, 20),
  // 其余配置字段保留
}

场景2：数据由后端返回，只能拿到字符串格式的Date.UTC(...) #

如果数据来源是后端接口，返回的内容本身就是带双引号的Date.UTC(...)字符串，可以通过正则提取参数后手动转换为时间戳：

// 转换工具函数
function convertUtcStrToTimestamp(utcString) {
  const dateParams = utcString.match(/\(([^)]+)\)/)[1].split(',').map(Number)
  return Date.UTC.apply(null, dateParams)
}

// 遍历数据源批量转换
yourSeriesData.forEach(item => {
  item.x = convertUtcStrToTimestamp(item.x)
  item.x2 = convertUtcStrToTimestamp(item.x2)
})

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