Javascript 将数组应用于Morris.js图表

我有一个php db调用生成的数据数组：

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

我想通过一个参数将其应用于morris条形图的数据键。如果我硬编码它，它工作。。。但我只想将区域数据滑入数据字段，就像我在ykey和label字段中使用doens一样，在数组中滑入没有问题

硬编码

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成为这样呢

您可以拥有一个对象原型

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

然后，当您想要创建一个新对象时，您可以

var foo = new Object.create(morrisBar);

然后你可以做什么

foo.data =  boxData;

并以这种方式指定类的其他数据成员

我不确定我是否误解了您的问题，如果我误解了，我很抱歉。

您需要将您的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];
  }
}

然后将该对象添加到新数组中，用作Morris.js配置对象中数据键的值：

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

---

您可以在检索后设置数据格式，如

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

---

希望能有所帮助。

我试过了，在：Object{1:1:32，2:2:33，3:3:34，4:4:35，period:2012 W1}之后得到了我自己的值。。但图表显示的是在……之前的值，而不是在……之后的值，即33、34等，实际上，这是一种享受！非常感谢。事实上，我以前并不了解这个问题。

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