javascript - 如何使用谷歌折线图两个不同长度的数组

Question

我正在尝试绘制 Google 折线图，其中每条线可能有不同数量的数据点。这是我的数组格式，一种长度为 2 ，另一种长度为 3 。我不知道如何解决这个问题，任何帮助都是值得赞赏的

Array [ Date 2018-05-04T18:30:00.000Z, 45 ]
Array [ Date 2018-05-22T18:30:00.000Z, 234, 234, 234 ]

这是我用来绘制图表的代码，这里我的列和行都是动态的。

for (var k = 0; k < data1.queryA.length; k++) {
  data.addColumn('number', data1.queryA[k].keyword);
}
for (var i = 0; i < data1.query.length; i++) {
  var arr = [];
  alert(data1.query[i].date.length);
  for (var j = 0; j < data1.query[i].date.length; j++) {
    arr.push(parseInt(data1.query[i].date[j].page));
  }
  var test = [new Date(data1.query[i].datee)];
  console.log(test.concat(arr));
  data.addRow(test.concat(arr));
}

Answer 1

每行的长度需要与列数完全匹配。您可以使用 null 值“右填充”行以显示缺失的数据点:

const data = [
  [ new Date("2018-05-04T18:30:00.000Z"), 45 ],
  [ new Date("2018-05-05T18:30:00.000Z"), 45, 12 ],
  [ new Date("2018-05-22T18:30:00.000Z"), 234, 234, 234 ]
];

const padNull = (size, data) =>
  data.map(r =>
    [...r, ...Array(size - r.length).fill(null)]
  );
  
  
console.log(padNull(4, data));
  

如果您不知道需要多少列，则需要找到最大的数据集:

const data = [
  [ new Date("2018-05-04T18:30:00.000Z"), 45 ],
  [ new Date("2018-05-05T18:30:00.000Z"), 45, 12 ],
  [ new Date("2018-05-22T18:30:00.000Z"), 234, 234, 234 ]
];

const columnCount = Math.max(...data.map(r => r.length));
console.log(columnCount);