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

当我将数字传递到x轴时，该图显示出来。但是当我试图在x轴上传递日期时，它什么都不显示。我已经给出了x轴这样如何使用nvd3折线图在x轴上显示日期

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

还有一与所述y轴的标记的问题是没有出现在任何图形。

Here是我的代码的jsfiddle。

来源

2013-02-21 vvr02

你看了这个帖子？ http://stackoverflow.com/questions/14058876/how-do-i-display-dates-on-the-x-axis-for-nvd3-d3-js – 2013-02-21 13:22:07

尝试用它没有用....... .. – vvr02 2013-02-21 13:28:14

我做错了什么是给日期字符串，而不是日期obj。

所以我分割JSON并使用日期字符串为x轴标签创建日期对象。就像下面一样。

new Date(dateStr)

现在是工作的罚款

来源

2013-02-25 12:08:30 vvr02

你能详细说明一下吗？ – 2014-01-13 16:28:17

作为“tickFormat”参数给出的函数将以'd'接收每个数据值的'x'属性。您的数据必须使用'x：new Date（dateStr）'生成; 'tickFormat'回调将在'd'中接收这个日期，并以timestamp表示，然后您可以将其转换回Date对象并将其提供给'd3.time.format'。至少，这就是我的理解，并使我的代码工作:) – 2014-03-26 00:40:29

有两件事情：

你可以设置自动收报机;
并且您可以从价值的东西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

来源

2016-10-11 16:53:20

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

回答

相关问题