Question

我试图创建一个时间序列图，其中x轴应该是时间，y轴是速度。我从json数组中读取时间和速度值。我可以在互联网上看到许多例子，他们只使用crossfilter定义了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）。

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

1 个答案: