highcharts.js:61 Error: <text> attribute y: Expected length, "NaNNaN".错误的解决

以你之姓@ 2024-02-18 16:28 18阅读 0赞

使用highcharts.js绘图时，在谷歌浏览器调试时，控制台显示多条错误：如下图所示

highcharts.js:61 Error: <text> attribute y: Expected length, "NaNNaN".  
\_defaultSetter @ highcharts.js:61  
highcharts.js:61 Error: <text> attribute y: Expected length, "NaNNaNNaN".  
\_defaultSetter @ highcharts.js:61  
highcharts.js:61 Error: <text> attribute y: Expected length, "NaNNaNNaNNaN".  
\_defaultSetter @ highcharts.js:61  
highcharts.js:61 Error: <text> attribute y: Expected length, "NaNNaNNaNNaNNaN".  
\_defaultSetter @ highcharts.js:61  
6highcharts.js:61 Error: <text> attribute y: Expected length, "NaNNaNNaNNaNNaNN…".  
\_defaultSetter @ highcharts.js:61

网上搜索一番，没有人遇到跟我一样的错误，只能自己想办法解决，因为错误提示attribute y，所以我把重点放在Y轴的代码上，经过反复调试，终于找到问题所在，以下是我的绘图代码(Y轴部分):

yAxis: \{  
title: \{  
text: "胆固醇(mmol/L)"  
\},  
style: \{  
color: "\#6D869F",  
fontSize: "12px",  
fontWeight: "normal"  
\},  
  
plotBands: \[\{  
 from: 0,  
 to: 2.59,  
 zIndex: 0,  
 color: "\#9AFF02",  
 style: \{  
 opacity: 0.5  
 \},  
 label: \{  
 y: 20,  
 style:\{  
 color: "\#9AFF02"  
 \}  
 \},  
  
 from: 2.59,  
 to: 5.2,  
 zIndex: 0,  
 color: "\#ECFFA8",  
 style: \{  
 opacity: 0.5  
 \},  
 label: \{  
 y: 20,  
 style:\{  
 color: "\#C0FFC0"  
 \}  
 \}  
\},\{  
 from: 5.2,  
 to: 10.35,  
 zIndex: 0,  
 color: "\#C0FFC0",  
 style: \{  
 opacity:0.5  
 \},  
 label: \{  
 text: "",  
 y: 20,  
 style:\{  
 color: "\#89691E"  
 \}  
 \}  
\}  
\],  
\}

原来是给图形添加背景色的部分plotBands这里设置了text属性，但赋值为" "，这里贴出那部分的代码：

from: 5.2,  
 to: 10.35,  
 zIndex: 0,  
 color: "\#C0FFC0",  
 style: \{  
 opacity:0.5  
 \},  
 label: \{  
 text: "",  
 y: 20,  
 style:\{  
 color: "\#89691E"  
 \}  
 \}

现在总算明白一些了，X轴、Y轴的title里的text属性赋值为" "，但plotBands这里设置了text属性，但赋值为" "，highcharts是不允许的。我的解决办法是把plotBands的text属性去掉，就不报这种错误了。