highcharts图表易错篇：前端通过string.split()得到的array数组直接赋值给series内data前需要做什么

为了让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";
//定义一个数组
var pDataArr = new Array();
//借用js的split()方法直接将字符串转换为数组
pDataArr = pStr.split(‘,‘);

//然后赋值于serise内的data
chart.series[0].update({
   data:pDataArr;
});

或者干脆就这样：

//然后赋值于serise内的data
chart.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]); //转换数据
}

//赋值给series
chart.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

版权声明：本文为博主原创文章，未经博主允许不得转载。