如何在 dc.js 时间序列图中指定 x 轴和 y 轴输入数据？

Question

我正在尝试创建一个时间序列图，其中我的 x 轴应该是时间，y 轴应该是速度。我从 json 数组中读取时间和速度值。我可以在互联网上看到很多例子，他们只使用交叉过滤器定义了 x 轴。 我的 json（输入到图表中）如下所示。此处仅显示示例。

   [
  {
    "Time": "19-Jan-2018 11:24:49.000 UTC",
    "Speed": 1.885
  },
  {
    "Time": "19-Jan-2018 11:24:59.000 UTC",
    "Speed": 1.875
  },
  {
    "Time": "19-Jan-2018 11:25:00.000 UTC",
    "Speed": 1.878
  },
  {
    "Time": "19-Jan-2018 11:25:01.000 UTC",
    "Speed": 1.876
  }
]

有人可以建议如何使用 dc.js 为时间序列图在 x 轴上标记这些时间并在 y 轴上标记速度

Answer 1

你可以这样做：

var cf = crossfilter(data);

var timeDimension = cf.dimension(function(d){ return new Date(d.Time); });
var totalGroup = timeDimension.group().reduceSum(function(d){ return d.Speed; });

var lineChart = dc.lineChart("#line-chart")
    .brushOn(false)
    .width(800)
    .height(200)
    .x(d3.time.scale().domain(d3.extent(data, function(d) {
        return new Date(d.Time);
    })))
    .dimension(timeDimension)
    .group(totalGroup);

dc.renderAll();

检查working demo。 （x 轴上有奇怪的刻度，因为我们在您提供的数据集中有最接近的日期。完整的数据集将look like this）。