Question

我有一份时间表列表。每个时间序列包含包含时间戳和值的对象。不同时间表的时间戳可以重叠也可以不重叠。我想在一个DyGraph中绘制这些时间表。

一个例子：

    data["first series"]  = [{timestamp: 1, value: 10.3},
                             {timestamp: 3, value: 12.5}]
    data["second series"] = [{timestamp: 2, value: 11.5},
                             {timestamp: 3, value: 13.0},
                             {timestamp: 4, value: 14.3}]

将输入数据转换为适合DyGraph的形式的最有效方法是什么？

Answer 1

我最近必须为dygraphs项目做同样的事情。在较高级别，您需要创建组合数据集，以便在所有系列中每个唯一x值有一行。对于在给定x处没有值的列/系列，可以插入null。

我会粘贴我在这里使用的一般代码。这是一个快速的复制粘贴，并经过大量修改，变量重命名等。它可能有一些小错误。我也使用min / max和dygraph的customBars，这就是为什么粘贴的代码使用列的数组，即使它可能不是必需的。

function combineSeries(seriesArr) {

  var dyDataRows = [];

  for (var seriesIdx = 0; seriesIdx < seriesArr.length; seriesIdx++) {

    var seriesData = seriesArr[seriesIdx];

    var newDyDataRows = [];

    var nextDataRowInsertIdx = 0;
    for (var dpIdx = 0; dpIdx < seriesData.length; dpIdx++) {
      var dp = seriesData[dpIdx];

      if (nextDataRowInsertIdx < dyDataRows.length) {
        var nextDataRowCols = dyDataRows[nextDataRowInsertIdx];
        var nextDataRowX = nextDataRowCols[0].getTime();
      }

      if (nextDataRowInsertIdx >= dyDataRows.length || dp.x < nextDataRowX) {
        var newDataRowCols = [new Date(dp.x)];
        for (var colIdx = 0; colIdx < seriesIdx; colIdx++) {
          newDataRowCols.push([null]);
        }
        newDataRowCols.push([dp.y]);
        newDyDataRows.push(newDataRowCols);
      }
      else if (dp.x > nextDataRowX) {
        var newDataRowCols = nextDataRowCols.slice(0);
        newDataRowCols.push([null]);
        newDyDataRows.push(newDataRowCols);
        nextDataRowInsertIdx++;
        dpIdx--;
      }
      else {//(dp.x == nextDataRowX) {
        var newDataRowCols = nextDataRowCols.slice(0);
        newDataRowCols.push([dp.y]);
        newDyDataRows.push(newDataRowCols);
        nextDataRowInsertIdx++;
      }

    }

    //insert any remaining existing rows
    for (var i = nextDataRowInsertIdx; i < dyDataRows.length; i++) {
      var nextDataRowCols = dyDataRows[i];
      var nextDataRowDateTm = nextDataRowCols[0];

      var newDataRowCols = nextDataRowCols.slice(0);
      newDataRowCols.push([null]);
      newDyDataRows.push(newDataRowCols);
    }

    dyDataRows = newDyDataRows;
  }

  return dyDataRows;
};

这是一种强力方法，可能有更高效的JavaScript编码技术。虽然它对我有用。

如何使用数据将对象转换为dygraphs的输入？

1 个答案: