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

Question

我正在尝试创建一个时间序列图，其中我的 x 轴应该是时间，y 轴是速度。我正在从 json 数组中读取时间和速度值。我可以在 Internet 上看到许多示例，其中他们使用交叉过滤器仅定义了 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. (There are strange ticks on x-axis, because of we have very closest dates in dataset that you provide. With full dataset it will look like this).

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

How to specify x-axis and y-axis input data in dc.js time series graph?

d3.js

crossfilter

dc.js