将数组应用于Morris.js图表

Applying an array to Morris.js charts

本文关键字：js 图表 Morris 应用于 数组      更新时间：2023-09-26

我有一个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
});

What I want…

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

我看到data应该是一个对象数组那么我怎么让boxData变成那样呢?

您可以在检索后将数据格式化为…

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

如果需要将值转换为整型，只需parseInt。

希望对你有帮助。

你可以有一个对象原型

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];
  }
}

boxDataObj输出

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

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

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