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

你可能感兴趣的:(Highcharts,图表,Data,series)