javascript - 如何使用 nvd3 折线图在 x 轴上显示日期

Question

当我将数字传递到 x 轴时，图表会显示出来。但是当我试图在 x 轴上传递日期时，它什么也不显示。我已经给了这样的x轴

chart.xAxis
           .axisLabel('Date')
           .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });

y 轴的另一个问题是标签未显示在任何图表中。

这是我的代码的jsfiddle。

Answer 1

我做错的是给出日期字符串而不是日期 obj。

所以我拆分 JSON 并使用 x 轴标签的日期字符串创建日期对象。如下所示。

new Date(dateStr)

现在它工作正常

Answer 2

有两件事：

1. 您可以设置代码；
2. 您可以将您的值从随机字符串转换为 NVD3 可以理解的值

如果你在 X 轴上提供一个字符串，NVD3 不知道如何排序，所以需要一个 Date 对象。您可以像这样设置图表：

chart.xAxis
  .x(function(d) { new Date(d.x) }) // this convert the data object
  .axisLabel('Date')
  .tickFormat(function(d) { return d3.time.format('%Y-%m-%d')(new Date(d)); }); // this convert the ticker