动态传递数据到Highcharts series.data时x-range图表为空问题

你的代码存在两个核心错误，和Highcharts本身的动态数据识别能力无关，传入的series.data根本不是要求的结构化对象数组：

• 无效的类型转换逻辑：JSON.parse(JSON.stringify("[" + dataString + "]"))是完全冗余的错误写法。JSON.stringify接收字符串作为参数时，返回的是带转义的双引号包裹的字符串字面量，再执行JSON.parse最终得到的仍然是你拼接的原始字符串，而非对象数组。Highcharts接收字符串类型的data配置时无法解析内部的x、x2、y字段，自然渲染空白图表。
• 手动拼接的字符串不符合语法规范：你逐行拼接的字符串存在两个JSON语法错误：一是对象的键没有按JSON要求用双引号包裹，二是每次拼接末尾会多出一个多余的逗号，就算直接对拼接结果执行JSON.parse也会抛出语法异常。
  你判断“动态数据内容格式符合要求”是误判：硬编码时传入的是对象数组，动态拼接传入的是字符串，二者数据类型完全不同，只是控制台打印时视觉效果相似而已。

强烈不推荐手动拼接字符串构造数据，这是这类语法错误的高发来源，按以下两种方案任选其一修复即可：

方案1：后端直接输出标准结构化JSON（最优解） #

修改C#后端逻辑，不要返回拼接后的字符串，直接构造对应结构的对象集合，序列化为标准JSON返回前端即可，前端不需要做任何额外的解析转换。
C#端参考逻辑：

// 逐行读取数据构造结构一致的对象集合
var xrangeData = dataRows.Select(row => new
{
    x = ((DateTimeOffset)row.StartTime).ToUnixTimeMilliseconds(),
    x2 = ((DateTimeOffset)row.EndTime).ToUnixTimeMilliseconds(),
    y = row.VesselIndex
}).ToList();
// 直接返回序列化后的JSON数组，不要做额外字符串拼接
return Json(xrangeData);

前端配置直接使用后端返回的数组即可：

series: [{
  pointWidth: 20,
  turboThreshold: 10000,
  data: backendResponse.chartData // 直接赋值数组，无需parse/stringify操作
}]

方案2：前端修正数据构造逻辑（适配无法修改后端的场景） #

如果暂时调整不了后端返回格式，前端不要用字符串拼接的方式生成数据，直接操作数组构造对象，从根源避免语法错误：

const chartData = [];
// 遍历拿到的后端逐行数据，直接push对象到数组
for (const row of backendRows) {
  chartData.push({
    x: row.startDate,
    x2: row.endDate,
    y: row.vesselCounter
  });
}

如果必须保留现有字符串拼接逻辑，需要先修正字符串为合法JSON格式再解析：

// 1. 拼接时给对象键加上双引号
// 2. 拼接完成后移除末尾多余的逗号
const validJson = `[${dataString.replace(/,$/, '')}]`;
// 只需要单次JSON.parse，不要嵌套JSON.stringify
const parsedData = JSON.parse(validJson);

最终series配置：

series: [{
  pointWidth: 20,
  turboThreshold: 10000,
  data: parsedData
}]

赋值前可以通过控制台打印校验数据类型是否正确：

• 正常可渲染的配置：Array.isArray(series[0].data)返回true，数组内元素为object类型，可以正常读取x、x2、y属性
• 原错误写法的配置：series[0].data类型为string，无法被Highcharts识别解析

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