highcharts圖表易錯篇：前端通過string.split()得到的array數組直接賦值給series內data前需要做什麼，

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內的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

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。