無法分析對象

Question

var data = [{ 
    x: 'A', 
    y: 3 
}, { 
    x: 'B', 
    y: 2 
}, { 
    x: 'C', 
    y: 4 
}, { 
    x: 'D', 
    y: 3 
}]; 

var xScale = new Plottable.Scales.Category() 
var yScale = new Plottable.Scales.Linear() 

var xAxis = new Plottable.Axes.Category(xScale, "bottom"); 

var plot = new Plottable.Plots.Bar() 
    .addDataset(new Plottable.Dataset(data)) 
    .x(function(d) { 
    return d.x; 
    }, xScale) 
    .y(function(d) { 
    return d.y; 
    }, yScale) 
    .animated(true) 
    .renderTo("svg#example"); 

上面的代碼渲染情節正常，但是當我寧可使用：

var data2 = { 
    'A': 2, 
    'B': 3, 
    'C': 4, 
    'D': 5, 
} 

var plot = new Plottable.Plots.Bar() 
    .addDataset(new Plottable.Dataset(data2)) 
    .x(function(d) { 
    return d; 
    }, xScale) 
    .y(function(d) { 
    return data2[d]; 
    }, yScale) 
    .animated(true) 
    .renderTo("svg#example"); 

這是行不通的。如何解析對象中的數據？是否可以在X中按字母順序顯示條形圖。有時在從一個對象轉換到另一個對象時，該數組按鍵的隨機順序解包，有時會使其第一個元素屬於'B'鍵。

Answer 1

將您的對象轉換爲數組。首先，獲取密鑰，然後將它們與值組合到一個數組中。如果它仍然不正確，可以對數組進行排序。

var data = Object.keys(data2).map(function (key) { return [key, data2[key]]; }); 

演示：

var data2 = {'A': 2, 'B': 3, 'C': 4, 'D': 5}; 
 

 
var data = Object.keys(data2).map(function (key) { return [key, data2[key]]; }); 
 

 
console.log(data);