Question

我有一组日期数据。我应该提供X轴值的值是多少？如何让人力车将X数据值显示为日期？

我查看了文档和示例，找不到任何内容。

Answer 1

我刚刚开始使用人力车并处于确切的情况。

但是，在我进一步发展之前，人力车文档实际上是不存在的，这是非常令人沮丧的，因为人力车与其他JS图形库相比的表现非常出色。

找到示例的最佳方法是深入了解源代码和github页面上的示例代码，尝试理解事物（而不是文档的方式）。

话虽如此，让我们尝试在StackOverflow上建立一个强大的问题/答案基础！

所以，回到问题:)看起来您已经找到了自己的问题解决方案，但我也提供了我的解决方案。

我没有使用Rickshaw.Graph.Axis.Time，而是使用了Rickshaw.Graph.Axis.X并相应地设置了tickFormat。

var data = [ { x: TIME_SINCE_EPOCH_IN_SECONDS, y: VALUE }, 
             { x: NEXT_TIME_SINCE_EPOCH_IN_SECONDS, y: NEXT_VALUE } ]

var xAxis = new Rickshaw.Graph.Axis.X({
  graph: graph,
  tickFormat: function(x){
                return new Date(x * 1000).toLocaleTimeString();
              }
})
xAxis.render();

toLocaleTimeString（）可以是任何Javascript日期函数，例如 toLocaleString（）， toLocaleDateString（）， toTimeString （），或 toUTCString（）。显然，因为 tickFormat 将函数作为参数，所以可以提供自己的格式化程序。

Koliber，如果您能提供更多详细信息，我有兴趣了解您的答案。

Answer 2

除了Lars的回复之外，我发现默认情况下Rickshaw正在调用

 .toUTCString(x.value*1000) //(just ctrl+F to find where =) ).

就我而言，由于这个原因，我在Graphite和Rickshaw之间的X上看到了不同的时间标签，一旦我将其更改为

，它就能很好地工作

 .toLocaleString(x.value*1000).

另外，你可能需要在两个地方修改它：Rickshaw.Graph.Axis.Time和...... HoverDetails

Answer 3

我终于发现X轴值应该是纪元时间值。然后，使用示例中的代码，我能够显示适当的时间范围。

我仍然有问题，因为我想在X轴上显示周数上的刻度线。但是，将timeUnit设置为“week”会导致JavaScript错误。它适用于其他时间单位。

Answer 4

这些都不适合我。对angularjs有用的是：

'x' : d3.time.format.iso.parse(date).getTime(), 'y' : 10

如何在人力车的X轴上绘制日期

4 个答案: