Невозможно разобрать объекты

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);