Highcharts Sunburst模块series.data变量异常：同一变量一处可用一处不可用

我之前也碰到过这种“官方Demo跑的好好的，自己代码里却时灵时不灵”的诡异问题，大概率是数据处理的细节没跟上，咱们一步步来揪出问题：

• 先盯紧value的类型！
  你的JSON里value是字符串类型（比如" "或者具体的数字字符串），但Highcharts Sunburst要求value必须是数值类型（number）。官方Demo里的测试数据肯定是数字，所以能正常渲染，但你解析后的chart_data里value还是字符串的话，Highcharts没法正确计算扇形尺寸，就会出现部分场景失效的情况。
  解决办法：解析后统一把value转成数字：

  var chart_data = parsed_data.data.map(item => ({
    ...item,
    value: parseFloat(item.value) || 0 // 转成数字，空值或非数字默认设为0
  }));
  

• 确认数据解析后的完整性和类型
  虽然你说JSON验证过，但从sessionStorage取出来解析后，还是要确认chart_data是正经的数组，而且结构和Demo里的一致。可以在控制台打印这几个值排查：

  console.log("Is chart_data an array?", Array.isArray(chart_data));
  console.log("First data item:", chart_data[0]);
  console.log("Data length:", chart_data.length);
  

  万一解析后出现了嵌套错误，或者数组为空，那肯定没法渲染。

• 检查数据使用的时机和上下文
  会不会是其中一处使用数据的时候，sessionStorage里的data_fap还没被存进去？比如异步请求还没完成就取数据了？或者两处使用数据的地方，有一处不小心修改了chart_data的结构（比如过滤、排序时出错）？
  可以在两处使用数据的代码前都加个判断，确保数据有效：

  if (!chart_data || !Array.isArray(chart_data) || chart_data.length === 0) {
    console.error("Invalid or empty chart data!");
    return;
  }
  

• 排查sessionStorage的存储过程
  会不会是存数据的时候JSON.stringify出了问题？比如存的不是完整的JSON结构？存的时候要确保是这样的：

  // 存数据时要正确序列化整个对象
  sessionStorage.setItem('data_fap', JSON.stringify({ data: yourOriginalDataArray }));
  

  如果存的时候就格式错误，解析后自然会出各种奇怪的问题。

先从value类型转换这个点入手，这是最常见的坑，大概率能解决你的问题！

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