highcharts图表易错篇:前端通过string.split()得到的array数组

为了让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

当眼泪流尽的时候,留下的应该是坚强。

highcharts图表易错篇:前端通过string.split()得到的array数组

相关文章:

你感兴趣的文章:

标签云: