Highcharts柱状图数据限制问题：NaN渲染错误求助

我之前也碰到过一模一样的Highcharts报错！这种NaN相关的布局错误，哪怕你已经检查了分类唯一性、数据类型，大概率还是和数据数组的匹配性有关，分享几个我亲测有效的排查方向：

• 核对series数据与x轴分类的长度一致性
  这是最常见的原因！如果x轴的categories数组有N个元素，那每一个series的data数组必须严格对应N个元素——哪怕是null或者0都可以，但绝对不能少。我之前就是有个系列的data比分类少了一个元素，导致Highcharts计算柱形/线条的位置和宽度时直接算出NaN，报了和你一样的错。

• 排查隐性的NaN值
  你说所有值都是数字，但可能存在隐性的无效值：比如接口返回的是字符串格式的数字（"100"其实是字符串，虽然Highcharts一般能转，但特殊场景会出问题）、或者某个值是undefined/null被错误处理成了NaN。可以用一行代码快速验证：

  // 替换成你的series数据数组
  console.log(yourSeriesData.every(item => !isNaN(Number(item))))
  

  如果返回false，就说明里面藏着无效值。

• 检查空数组的series
  如果某个series的data是空数组[]，Highcharts在渲染时也会因为找不到有效数据点，计算x坐标和宽度时抛出NaN错误。这种情况可以给空数据的series设置visible: false，或者补一个全null的数组匹配分类长度。

• 确保数据完全加载后再渲染图表
  如果是异步加载数据（比如从接口拿数据），一定要等所有series的data都获取并处理完成后再调用Highcharts.chart()。我之前踩过坑：某个series的data还在请求中就初始化了图表，此时data是undefined，直接触发了NaN报错。

如果你的示例fiddle里能复现问题，不妨先检查每个series的data长度和categories是否完全对应，大概率能找到问题所在。

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