Question

我试图将某些数组数据转换为特定格式，以便我可以使用google linechart。但我无法做到这一点。

现在我有格式

//format [date, id, count
var data = [

   ["2014-04-01", "1", "100"],
   ["2014-04-02", "1", "200"],
   ["2014-04-03", "1", "150"],
   ["2014-04-04", "1", "5"],

   ["2014-04-01", "2", "200"],
   ["2014-04-02", "2", "600"],
   ["2014-04-03", "2", "15"],
   ["2014-04-04", "2", "25"],

   ["2014-04-01", "3", "99"],
   ["2014-04-02", "3", "85"],
   ["2014-04-03", "3", "555"],
   ["2014-04-04", "3", "0"]

];

我需要把它变成格式：

var reformatted = [

      ['Date', '1', '2', '3'],
      ['2014-04-01', 100, 200, 99],
      ['2014-04-02', 200, 600, 85],
      ['2014-04-03', 150, 15, 555],
      ['2014-04-04', 5, 25, 0]

    ]);



var graph = [["date"]];

//first element of array to be populated with array of ID's
//always second element of inner arrays
//these will be the lines of the graph
for (var i = 0; i < data.length; i++){

  if (graph[0].indexOf(data[i][1]) < 0){

    graph[0].push(data[i][1]);

  }

}

这让我处于一个非常好的地方。我明白了：

Array[1]]
    0: Array[4]
       0: "date"
       1: "1"
       2: "2"
       3: "3"

但我对如何以适当的格式获取其余数据感到困惑。有什么想法吗？

试过这个。没有好结果。

for (i = 0; i < data.length; i++){

  graph[i + 1] = graph[i + 1] || [];
  graph[i + 1].push(data[i][2]);

}

Answer 1

逻辑：

首先通过迭代初始数组查找唯一日期来生成它。

[
 ['Date'],
 ['2014-04-01'],
 ['2014-04-02'],
 ['2014-04-03'],
 ['2014-04-04']
]

然后再次转换生成的数组，再次遍历查找唯一数字的初始数组。同时生成唯一编号列表。

[
 ['Date','1','2','3'],
 ['2014-04-01'],
 ['2014-04-02'],
 ['2014-04-03'],
 ['2014-04-04']
]

现在遍历上面的数组，并为每个项目迭代数字列表，并从日期和数字匹配的初始数组中查找匹配项。将匹配项放在上面的数组中。如果找不到，则放置null。你应该得到以下。我已经在PHP中完成了这个，但没有在javascript中完成。

[
 ['Date','1','2','3'],
 ['2014-04-01', null, 100, 200],
 ['2014-04-02', 100, 400, 500],
 ['2014-04-03', 200, null, 100],
 ['2014-04-04', 100, 300, 100]
]

祝你好运！

<强>除了

在php中：

$originalData = array(
    array("2014-04-01", '1', '200'),
    array("2014-04-02", '1', '300'),
    array("2014-04-03", '1', '400'),
    array("2014-04-04", '1', '200'),
    array("2014-04-01", '2', '400'),
    array("2014-04-02", '2', '100'),
    array("2014-04-03", '2', '200'),
    array("2014-04-04", '2', '100'),
    array("2014-04-01", '3', '200'),
    array("2014-04-02", '3', '600'),
    array("2014-04-03", '3', '300'),
    array("2014-04-04", '3', '900'),
);

第二步的结果将是：

$graphData = array(
         array('Date','1','2','3'),
         array('2014-04-01'),
         array('2014-04-02'),
         array('2014-04-03'),
         array('2014-04-04'),
);

数字列表将是：

$numbers = array('1','2','3');

然后我会按如下步骤进行第三步：

$i = 0;
foreach($graphData as $graphDataItem) {

    if ($graphDataItem[0]!='Date') { // ignore the first index

        $j = 1; // 0 is date column
        foreach($numbers as $number) {
            foreach($originalData as $originalDataItem) {

                // set the value to null until found
                if (!isset($graphData[$i][$j]))
                  $graphData[$i][$j] = null;

                if ($originalDataItem[0] == $graphDataItem[0] && // check date match
                    $originalDataItem[1] == $number) { // check number match
                    $graphData[$i][$j] = $originalDataItem[2];
                    break;
                } 
            }
            $j++;
        }
    }
    $i++;
}

结果$ graphData将是：

array
(
    0 => array
    (
        0 => 'Date'
        1 => '1'
        2 => '2'
        3 => '3'
    )
    1 => array
    (
        0 => '2014-04-01'
        1 => '200'
        2 => '400'
        3 => '200'
    )
    2 => array
    (
        0 => '2014-04-02'
        1 => '300'
        2 => '100'
        3 => '600'
    )
    3 => array
    (
        0 => '2014-04-03'
        1 => '400'
        2 => '200'
        3 => '300'
    )
    4 => array
    (
        0 => '2014-04-04'
        1 => '200'
        2 => '100'
        3 => '900'
    )
)

以上内容可以获得$ graphData的结果。但是，对于较大的设备，处理器会很重。

Answer 2

这是一个选项：首先按日期对所有数据进行分组，然后将其转换回您需要的表示形式。如果您想要更多地自动化它，您还可以跟踪ID并自动添加图例列表。

var data = [

   ["2014-04-01", "1", "100"],
   ["2014-04-02", "1", "200"],
   ["2014-04-03", "1", "150"],
   ["2014-04-04", "1", "5"],

   ["2014-04-01", "2", "200"],
   ["2014-04-02", "2", "600"],
   ["2014-04-03", "2", "15"],
   ["2014-04-04", "2", "25"],

   ["2014-04-01", "3", "99"],
   ["2014-04-02", "3", "85"],
   ["2014-04-03", "3", "555"],
   ["2014-04-04", "3", "0"]

];

var groupByDate = function (data) {
  var dataByDate = {};
  data.forEach(function (entry) {
    var date = entry[0];
    var count = entry[2];
    if (!(date in dataByDate)) {
       dataByDate[date] = []; 
    }
    dataByDate[date].push(count);
  });
  return dataByDate;
}

var toChartData = function (dataByDate) {
  var chartData = [];
  for (var date in dataByDate) {
        chartData.push([date].concat(dataByDate[date]));
  };
  return chartData;
};

var byDate = groupByDate(data);
var chartData = toChartData(byDate);
chartData.unshift(['Date', 1, 2, 3]);

console.log(chartData);

Answer 3

对于像这样的事情，数组可能很粗糙，为了使它更容易，最好先将它转换为一个对象，以便更容易使用。

var obj = {};

for(var i=0;i<data.length;i++){
 if(!obj[data[i][0]]){ //check if index already exists
  obj[data[i][0]] = {}; //create sub object from the index
 }
 for(var ii=0;ii<data[i].length;ii++){
  if(ii!=0){ //since the 0 index is the parent here, ignore it
   obj[data[i][0]][ii] = data[i][ii];
  }
 }
}

这应该转换为如此对象：

var data = {
 '2014-04-01':{
  1:100,
  2:200,
  3:99
 } //continue for the rest
}

所以你可以看到将它转换成几乎任何其他结构都会容易得多。

var graph = [['date','1','2','3']];
for(var index in data){
 if(data.hasOwnProperty(index)){
  var arr = [index];
  for(var index2 in data[index]){
   if(data[index].hasOwnProperty(index2)){
    arr.push(data[index][index2]);
   }
  }
  graph.push(arr);
 }
}

未经测试并在现场书写，但概念就在那里。

迭代数组以重新格式化

3 个答案: