應用陣列來Morris.js圖表​​

Question

我有從一個PHP分貝呼叫產生的數據的數組：

boxData[0] = "period : 2012 W1"; 
boxData[1] = "1:33"; 
boxData[2] = "2:36"; 
boxData[3] = "3:23"; 
boxData[4] = "4:37"; 

我想這適用於由參數的莫里斯條形圖的數據密鑰。如果我硬編碼它，它的工作原理...但我想只是將區域數據滑入數據字段，因爲我有ykey和label字段，我在數組中滑入沒有問題。

硬編碼..

Morris.Bar({ 
    element : 'morris-bar-chart', 
    data : [{ 
    period : "2012 W1", 
    1: 33, 
    2: 34, 
    3: 35, 
    4: 32 
    }], 
    xkey : 'period', 
    ykeys : boxKey, 
    labels : boxLabels, 
    hideHover : 'auto', 
    resize : true 
}); 

我想要什麼......

Morris.Bar({ 
    element : 'morris-bar-chart', 
    data : boxData, 
    xkey : 'period', 
    ykeys : boxKey, 
    labels : boxLabels, 
    hideHover : 'auto', 
    resize : true 
}); 

我看到的數據應該是對象的數組，所以我怎麼弄boxData是什麼？

Answer 1

你總是可以格式化後的數據檢索像...

var boxDataObj = {}; 

while (boxData.length > 0){ 
    var temp = cleanData(boxData.shift()); 
    boxDataObj[temp.index] = temp.value; 
} 

function cleanData(el) { 
    var trimmed = el.split(':'); 
    return { 
     index: trimmed[0].trim(), 
     value: trimmed[1].trim() 
    }; 
} 

，如果你需要的值是int只是parseInt函數。

希望有所幫助。

Answer 2

你可以有一個對象原型。

morrisBar{ 
element:'', 
data:[], 
. 
. 
. 
} 

然後，當你想創建一個新的對象，你可以做

var foo = new Object.create(morrisBar); 

，然後可在做

foo.data = boxData; 

，並指定類的其他數據成員的方式。

我不確定我是否誤解了你的問題，所以很抱歉，如果我有。

Answer 3

您需要將boxData數組轉換爲一個對象：

for (var i = 0, l = boxData.length; i < l; i++) { 
    if (i === 0) { 
    boxDataObj.period = boxData[0].split(' : ')[1]; 
    } else { 
    boxDataObj[i] = boxData[i].split(':')[1]; 
    } 
} 

boxDataObj輸出

{ 
    period: "2012 W1", 
    1: 33, 
    2: 34, 
    3: 35, 
    4: 32 
} 

Demo

，然後添加對象使用一個新的數組Morris.js配置對象中數據鍵的值：

Morris.Bar({ 
    element : 'morris-bar-chart', 
    data : [boxDataObj], 
    xkey : 'period', 
    ykeys : boxKey, 
    labels : boxLabels, 
    hideHover : 'auto', 
    resize : true 
});