为了让highcharts图表数据可以动态从后台页面获取,我们通常都是使用Ajax进行异步获取数据,,通过其回调函数返回前端需要的数据。返回的数据格式有多种:json数据还有纯粹的字符串数据。 当我们返回的数据为字符串时,如:”7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6” 我们得到这个数据需要动态赋值给highcharts图表内第一个序列的data属性值,常常我们都会这样做:
var pStr = “7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6”;();//借用js的split()方法直接将字符串转换为数组pDataArr = pStr.split(‘,’);//然后赋值于serise内的datachart.series[0].update({ data:pDataArr;});
或者干脆就这样:
//然后赋值于serise内的datachart.series[0].update({ data:pStr;});
以上两种方式均是错误的,图表根本就加载不了数据进来。 原因分析: 1、针对第一种赋值方式,违背了data数据为非字符串的原则,我们将其pStr转换为数组后其实你debugger后发现每一个值其实都是字符串,所以用字符串数组赋值给data会报错的。解决办法就是将数组内每一个字符串转换为整数就可以了的。示例代码如下所示:
var str = “7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6”;vData = str.split(‘,’);for (var i = 0; i < vData.length; i++) {vData[i] = parseInt(vData[i]); //转换数据}//赋值给serieschart.series[0].update({ data:vData;});
2、针对第二个直接将字符串赋值给series的data更是大错特错,series的data要的是一个数据对象,所以我们要想办法将字符串格式化为数据对象就可以了的。这个时候我们想到了eval()函数,示例代码如下所示:
var pStr = “7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6”;chart.series[0].update({data: eval(“[“+pStr+”]”)});
了解更多highcharts
当眼泪流尽的时候,留下的应该是坚强。